美文网首页
javascript原型链

javascript原型链

作者: Conner陈 | 来源:发表于2018-03-05 10:57 被阅读0次

    前言

    在学习js之路上难免会遇上经典问题原型链,而且这个概念相对而言比较难以理解。查阅了网上很多参考,文章。五花八门有些确实写的不错,有些反而让我看了有点懵逼。为了方便自己日后回顾,抱着学习和记录的态度以一个小白的角度希望能把自己对于这个概念的理解撸一撸

    • 实例和实例化
    • 普通函数和构造函数的区别
    • prototype、_proto_、constructor
    • 参考文献

    实例和实例化

    function Aa(name,age){
      this.name=name;
      this.age=age;
    }
    //或者
    function Ba(name){
      console.log(name)
    }
    

    以上就是一个普通函数。创建函数便是普通函数。

    var bb = new Aa();
    

    构造函数的声明,我们需要通过new这个关键字来创建一个构造函数。如上所示,整个过程便是实例化,而变量bb则是一个实例。我们可以打印出bb,它对应的就是Aa()这个普通函数。

    普通函数和构造函数的区别

    //普通函数(Aa函数中的this=>window)
    function Aa(name,age){
      this.name=name;
      this.age=age;
    }
    //构造函数(bb实例中的Aa函数中的this=>bb)
    var bb = new Aa();
    

    1.普通函数我们使用首字母大写;而构造函数则使用首字母小写。
    2.两者最大的区别便是this的指向不一样。如下图:

    未命名文件.png

    prototype、_proto_、constructor

    想要理解原型链还需要明白为什么产生原型链,这里我推荐大家看一下阮一峰对于原型链的解释,很形象很容易懂。
    简单的说:当我们通过new关键字去实例化一个构造函数的时候,这个实例便拥有了实例对象(就是那个普通函数)的方法和属性。

    function Aa(name,age){
      this.name=name;
      this.age=age;
    }
    var bb = new Aa();
    var cc = new Aa();
    

    如上所示,bb和cc都拥有了与Aa()相同,且独立的属性和方法,他们之间相互独立。也正式因为独立,就产生了问题!如果我希望改变bb中的某个属性,同时希望cc也跟着变化呢?
    这个时候,我们就需要一个公共的属性和方法的集合(即一个存储公共属性和方法的容器)。

    prototype

    这个所谓的容器出现了。在我们创建普通函数的时候,就会产生一个prototype。然后我们可以使用如下方式在普通函数中存放公共的属性和方法。

    function Aa(name,age){
      this.name=name;
      this.age=age;
    }
    var bb=new Aa();
    var cc= new Aa();
    
    Aa.prototype.sayName=function(){
      console.log("123")
    }
    Aa.prototype.sex="男"
    

    如上所示:我们实例bb和cc都拥有例sayName和sex;同时,当我们修改sayName或sex的时候,bb和cc也会跟着变化。

    function Aa(name,age){
      this.name=name;
      this.age=age;
    }
    var bb=new Aa();
    var cc= new Aa();
    
    bb.constructor.prototype.sex="女"
    

    如上所示:我们也可以使用bb或者cc来修改sayName和sex。其实就是去修改Aa.prototype中的属性和方法。

    constructor

    关于constructor,如上所说:当我们需要通过实例bb或者cc来修改我们Aa()上的prototype中的属性或者方法的时候。我们就需要constructor这个属性了。
    简单的说:这个属性其实就是Aa()这个函数

    //在控制台中输入如下
    function Aa(){};//创建了一个普通函数
    var bb=new Aa();//实例化了一个构造函数
    bb.constructor===Aa;//true
    

    如上所示:证明bb.constructor确实是等于Aa()这个函数的。

    function Aa(){};
    Aa.prototype.sex="男";
    var bb = new Aa();
    bb.constructor.prototype.sex===Aa.prototype.sex;//true
    

    如上所示,我们便直接通过bb.constructor.prototype来修改Aa.prototype里的属性或者方法。

    _proto_

    通过上面的内容,我们基本已经明白了原型链中各个名词的作用。至于_proto我个人的理解,我们说所的原型链中的便是通过_proto串联起来。
    我们可以通过控制台看一下我们一个实例是如何通过 _proto_链接的。

    4791520218428_.pic_hd.jpg

    实例和实例化

    阮一峰的Javascript继承机制的设计思想

    总结

    以上是我个人对于原型链的理解,如果有误希望大家能够指点。

    相关文章

      网友评论

          本文标题:javascript原型链

          本文链接:https://www.haomeiwen.com/subject/jjqcfftx.html