理解Javascript的原型链

Posted getOrLose

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了理解Javascript的原型链相关的知识,希望对你有一定的参考价值。

要理解原型链,首先要清楚理解以下几点:

  1.所有函数都事Function的实例化,都包含prototype属性,即原型对象。

  2.所有对象都有__proto__属性,该属性指向对象构造函数的prototype原型对象。

  3.prototype原型对象的constructor属性指向它所在的原型对象的构造函数,即构造函数本身。

  4.prototype是针对函数说的,__proto__是针对对象说的。

  5.函数本身也是对象。

认识到以上几点,我们先看一下原型链:

function setName() {
        this.name = \'mark\';
    }

    function setAge() {
        this.age = 20;
    }

    setAge.prototype = new setName();

    var obj = new setAge();
    console.log(obj.name,obj.age);//mark 20

    console.log(obj.constructor === setName);//true
  

上面代码我们使用构造函数setAge()实例化一个对象obj,其中,age由构造函数写入,而name属性是有setAge的原型对象setName写入的。obj.constructor === setName 返回true是因为,在obj对象的构造函数中,并没有直接的consructor,它的constructor属性是通过__proto__属性继承的,而__proto__指向obj的构造函数的prototype对象,即setAge.prototype,也就是setName,所以会返回true。

那么,最简单的一条原型链就应该为,实例对象《==  构造函数 《==  构造函数原型对象 《==   Object   《==   Object.prototype   《==   null,而原型对象中的构造函数(constructor属性)都等于它所在的构造函数。

 

function createO() {
        this.x = 1;
    }

    var o = new createO();

    console.log(o.__proto__);//createO.prototype
    console.log(o.__proto__.__proto__);//Object
    console.log(o.__proto__.__proto__.__proto__);//null

 

 

那么说白了,原型链的本质就是实例化对象和原型对象(prototype)之间形成的继承链条。

再说一下继承:

使用原型链最常用的继承方式:

复制代码
 1 function Person(name){
 2    this.name = name;
 3 }
 4 Person.prototype.showName = function(){
 5    console.log(this.name);
 6 }
 7 function Student(name,age){
 8    Person.call(this,name);
 9    this.age = age;
10 }
11 Student.prototype = new Person();
12 Student.prototype.contructor = Student;
13 Student.prototype.showAge = function(){
14     console.log(this.age);
15 }
16 var stu = new Student(\'张三\',12);
17 stu.showName();
18 stu.showAge();

参考文献:https://www.cnblogs.com/DF-fzh/p/5619319.html

https://www.cnblogs.com/Yirannnnnn/p/4896542.html#undefined

以上是关于理解Javascript的原型链的主要内容,如果未能解决你的问题,请参考以下文章

好文要顶之 --- 简单粗暴地理解 JavaScript 原型链

好文要顶之 --- 简单粗暴地理解 JavaScript 原型链

深入理解javascript原型链

web前端:理解js原型链

JavaScript对象原型链继承闭包

上帝视角一文理解JavaScript原型和原型链