最易懂的js原型之解析

迈不过友情╰ 2022-07-15 04:13 93阅读 0赞

## 一 .什么叫原型 ##

javaScript所有的函数都有一个prototype属性，这个属性引用了一个对象，即原型对象，也简称原型

## 二 .为什么要引入原型 ##

首先回顾一下创建对象的几种方法  
（1） 字面量的创建法

var box=new  Object();
               box.name="张三";
               box.sex="女";
               box.say=function(){ 
                  console.log("你是"+this.name+"性别"+this.sex)
               }
               box.say();

上边方法创建了一个字面量的对象，但如果要创建多个类似的对象就会产生大量冗余重复的代码
    
    
               比如

var box2=new  Object();
               box2.name="张三";
               box2.sex="女";
               box2.say=function(){
                  console.log("你是"+this.name+"性别"+this.sex)
               }
               box2.say();
    ................................................................................无数个box被创建.........................

（2）工厂模式创建对象

## 三 创建构造函数 原型 ##

//构造函数
        function Person(name,age){
            this.name = name;
            this.age = age;
            this.showAge = function(){
                console.log(this.name+"的年龄是:"+this.age);
            }
        }
    
    
        //构造函数的原型对象
        console.log(Person.prototype); // Person {}
        console.log(Person.prototype.__proto__);// Object {}
        console.log(Person.prototype.__proto__.__proto__);// null
    
        //实例对象
        var p1 = new Person("乔峰",35);
        console.log(p1.__proto__);// Person {}
    
        //true,全等:指代的是同一个原型对象,即在内存代表同一个对象
        console.log(Person.prototype === p1.__proto__);
    
    
    
        /*
        //实例对象的__proto__ 属性设置原型对象,如果不进行对象的原型对象设置,返回Object对象
        var p1 = new Object();
        p1.__proto__ = Person.prototype;
        p1.name = "乔峰";
        //console.log(p1);//Person { name="乔峰"}
    
    
    
        //构造器
        console.log(Person.prototype.constructor);
        console.log(p1.__proto__.constructor);
        console.log(Person);
    
        //判断实例对象是否属于某个构造函数(类)
        console.log(p1.__proto__.constructor === Person);
        */

## 四 .原型的相关方法 ##

function Person(name){
                this.name = name;
            }
    
            Person.prototype.age = 40;
    
            var p = new Person("张三");
    
    
            /*
             * 总结:
             *  1.p.hasOwnProperty("name") 语法:对象.方法("属性名") 查找对象自身是否存在该属性,不能查找到原型对象
             *  2. "name" in p 语法:"属性名" in 对象  查找对象自身已经原型对象中是否存在该属性
    
            console.log(p.hasOwnProperty("name"));//true
            console.log("name" in p);//true
    
            console.log(p.hasOwnProperty("age"));//false
            console.log("age" in p);//true
             */
            /*
            //查找对象的原型对象
            console.log(Object.getPrototypeOf(p));
            console.log(p.__proto__);
            */
            /*
            //Object.create(p) 以p对象为原型,新建一个对象
            var p2 = Object.create(p);
            console.log(p2);
            console.log(p.name);
    
            //判断p是否p2的原型对象
            console.log(p.isPrototypeOf(p2));
            */

## 原型学到这里就可以入门啦 。。。。。。。。。。。。。。。。。 ##

“\`