码迷,mamicode.com
首页 > 编程语言 > 详细

理解Javascript的原型链

时间:2018-06-27 18:59:07      阅读:120      评论:0      收藏:0      [点我收藏+]

标签:写入   https   html   ===   func   log   cto   就是   cti   

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

  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的原型链

标签:写入   https   html   ===   func   log   cto   就是   cti   

原文地址:https://www.cnblogs.com/zhangbob/p/9235402.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!