JavaScript 原型 原型链

JavaScript 原型

本文讲介绍JavaScript原型 以及JavaScript的原型链

---

JS中的原型和原型链

所有的引用类型（数组、函数、对象）可以自由扩展属性（除null以外）

所有的函数都有一个prototype属性(显式原型)

所有的引用类型都有一个__proto__属性(隐式原型)

所有引用类型 它的__proto__属性指向它的构造函数的 prototype属性

当试图得到一个对象的属性时 如果这个对象不存在这个属性，那么就会去它的 __ proto__的路线去查找 也就是构造函数中的 prototype 中去查找

---

一、原型的使用和原型的概念

1.显式原型 prototype

在我们创建一个函数的时候 每个函数都会有一个prototype（原型）属性 这个属性指向一个对象，这个对象包含着可以实例共享的属性和方法 你可以不必再构造函数中定义对象的实例信息 而直接将这些信息直接添加到原型对象中

// ↓ -------- 创建一个构造函数 --------
    function Person(name,age) {
        this.name = name;
        this.age = age;
    }
    Person.prototype.sex = "man"
// ↓ -------- 在原型中添加一条方法 ---------
    Person.prototype.seyLove = function () {
        console.log(name +" love 1024")
    };
// ↓ -------- 实例化这个对象 ----------
    var man  = new Person("伊凡ED",20);

    console.log(man)
    console.log(man.name+" sex="+man.sex);
    Person.prototype.seyLove()

// - ↑ 输出结果 = Person {name: "伊凡ED", age: 20}
//               伊凡FD sex=man
//               love 1024

如果我们再构造函数内定义好这个seyLove方法的话 那么我们用这个构造函数构造的每一个对象里都会拥有seyLove这个方法 这样我们就浪费了很多的资源 我们完全可以给需要用到的对象添加需要的方法  那么 我们就可以用原型方法 并且这个方法可以继承 需要了解继承可以在我的博客搜索 JavaScript 继承

2.隐式原型（原型对象）__proto__

JavaScript中的所有对象(除了null)都具有的一个属性 __proto__ 所有的__proto__都是指向它的构造函数的 prototype 属性 下面的例子最后一行也向我们证明了这一点 

// ↓ -------- 创建一个构造函数 --------
    function Person(name,age) {
        this.name = name;
        this.age = age;
    }
    Person.prototype.sex = "man"
// ↓ -------- 在原型中添加一条方法 ---------
    Person.prototype.seyLove = function () {
        console.log(name +" love 1024")
    };
// ↓ -------- 实例化这个对象 ----------
    var man  = new Person("伊凡ED",20);

    console.log(man)
    console.log(man.name+" sex="+man.sex);
    Person.prototype.seyLove()
    console.log(man.__proto__)
    console.log(Person.prototype)
    console.log(man.__proto__===Person.prototype)
    

// - ↑ 上面的代码输出 ：Person {name: "伊凡FD", age: 20}
//                    伊凡ED sex=man
//                    love 1024
//                    {sex: "man", seyLove: ƒ, constructor: ƒ}
//                    {sex: "man", seyLove: ƒ, constructor: ƒ}
//                    true

我们接着用一张图清楚的标明他的指向

3.Object

既然 刚才说所有的对象 都有一个__proto__属性 那么我们原型的__proto__指向哪里呢 

    // ↓ -------- 创建一个构造函数 --------
    function Person(name,age) {
        this.name = name;
        this.age = age;
    }
    Person.prototype.sex = "man"
    // ↓ -------- 在原型中添加一条方法 ---------
    Person.prototype.seyLove = function () {
        console.log(name +" love 1024")
    };
    // ↓ -------- 实例化这个对象 ----------

    var man  = new Person("伊凡FD",20);
    console.log(man.__proto__.__proto__)

// - ↑ 上面的输出：

/* constructor: ƒ Object()
 * hasOwnProperty: ƒ hasOwnProperty()
 * isPrototypeOf: ƒ isPrototypeOf()
 * propertyIsEnumerable: ƒ propertyIsEnumerable()
 * toLocaleString: ƒ toLocaleString()
 * toString: ƒ toString()
 * valueOf: ƒ valueOf()
 * __defineGetter__: ƒ __defineGetter__()
 * __defineSetter__: ƒ __defineSetter__()
 * __lookupGetter__: ƒ __lookupGetter__()
 * __lookupSetter__: ƒ __lookupSetter__()
 * get __proto__: ƒ __proto__()
 * set __proto__: ƒ __proto__()
 * */

得到的结果看着还很长 我们顺着这条线 来到了Object构造函数的原型 

4.null

这次我们打印Object.prototype的__proto__ 输出为null （万物皆对象 对象皆为空）

    // ↓ -------- 创建一个构造函数 --------
    function Person(name,age) {
        this.name = name;
        this.age = age;
    }
    Person.prototype.sex = "man"
    // ↓ -------- 在原型中添加一条方法 ---------
    Person.prototype.seyLove = function () {
        console.log(name +" love 1024")
    };
    // ↓ -------- 实例化这个对象 ----------

    var man  = new Person("伊凡FD",20);
    console.log(man.__proto__.__proto__.__proto__)

// - ↑ 上面的输出：null

5.原型的查找属性

现在我可以解释一下 原型的查找属性 根据上面的__proto__ 如果在一个对象中查找某个属性 未查找到 则会顺着__proto__的路线向上查找 也就是 先去查找显性原型中有没有该属性 如果没有 他就会沿着__proto__的路线一直向上找 也就是他会根据构造安徽函数的原型去查找  如果都没又找到 最后只能输出null 万物皆为空

6.constructor 

以上的指针指向的都是原型 刚才也说了每一个对象都有一个__proto__ 每一个__proto__ 都指向的是原型 而每一个原型 都又一个关联的构造函数 而constructor 就是指向这个函数的

    // ↓ -------- 创建一个构造函数 --------
    function Person(name,age) {
        this.name = name;
        this.age = age;
    }
    Person.prototype.sex = "man"
    // ↓ -------- 在原型中添加一条方法 ---------
    Person.prototype.seyLove = function () {
        console.log(name +" love 1024")
    };
    // ↓ -------- 实例化这个对象 ----------
    var man  = new Person("伊凡ED",20);
    console.log(man.__proto__.constructor );
    console.log(man.__proto__.constructor.prototype );
    console.log(man.__proto__.__proto__.constructor );
    console.log(man.__proto__.__proto__.constructor.prototype );



// - ↑ 输出结果：

/* ƒ Person(name,age) {
 * this.name = name;
 * this.age = age;
 * }
 * {sex: "man", seyLove: ƒ, constructor: ƒ}
 * ƒ Object() { [native code] }
 * {constructor: ƒ, __defineGetter__: ƒ, 
 * __defineSetter__: ƒ,
 * hasOwnProperty: ƒ,
 * __lookupGetter__: ƒ,
 * …}
 * */

情况如下图：

我们在使用原型的时候 一般将需要扩展的方法写在构造函数的prototype属性中 避免写在__proto__属性里面。