精华内容
下载资源
问答
  • 原型和原型链

    2021-02-25 10:21:25
    JS原型和原型链JS原型和原型链原型prototype_proto _constructor实例与原型原型的原型原型链 JS原型和原型链 原型 prototype 在javascript中,每个函数都有一个prototype属性,这个属性指向函数的原型对象 例如: ...

    JS原型和原型链

    原型

    prototype

    在javascript中,每个函数都有一个prototype属性,这个属性指向函数的原型对象

    例如:

    function Person(age){
    	this.age = age
    }
    Person.prototype.name="小花"
    var person1 =  new Person()
    var person2 = new Person()
    console.log(person1)  // 小花
    console.log(person2) // 小花
    

    上述例子中,函数的prototype指向了一个对象,这个对象就是调用构造函数时创建的实例的原型,也就是person1和person2

    原型的概念:每个javascript对象(null除外)创建的时候,就会与之关联另一个对象,这个对象就是我们说的原型,每个对象都会从原型中“继承”属性
    也可以这样理解:原型(prototype)是function对象的一个属性,它定义了构造函数制造对象的公共祖先(公共属性和公共方法),通过该构造函数产生的对象,可以继承原型的属性和方法。原型也是对象
    通俗点讲:原型就是对象的模板

    我们用张图来表示 构造函数和实例原型之间的关系

    在这里插入图片描述

    _proto _

    每个对象(null除外)都会有的属性,叫做_proto_,指向该对象的原型

    function Person(){
    }
    var person = new Person()
    console.log(person._proto_ === Person.prototype) // true
    

    而关系图
    在这里插入图片描述

    补充说明:
    绝大数的浏览器都支持这个非标准的方法来访问原型,然而它并不存在Person.prototype中,实际上,它存在Object.prototype,与其说是一个属性不如说是一个getter/setter,当使用obj.proto,可以理解为返回了Object.getPrototype(obj)

    constructor

    每个原型都有一个constructor属性,指向该关联的构造函数

    function Person(){
    }
    console.log(Person===Person.prototype.constructor) // true
    

    更新关系图:
    在这里插入图片描述

    function Person(){
    }
    var person = new Person()
    console.log(person._proto_  == Person.prototype ) // true
    console.log(Person.prototype.constructor == Person) // true
    //顺便学个ES5的方法,获取对象的原型
    console.log(Object.getPrototypeOf(person) === Person.prototype) //true
    

    补充说明

    function Person (){
    }
    var person = new Person()
    console.log(person.constructor === Person) //true 
    

    当获取 person.constructor 时,其实Person中并没有constructor属性,当不能读取到construcor属性时,就会从person的原型也就是Person.prototype中读取,正好该原型中有该属性,所以

    person.constructor == Person.prototye.constructor
    

    实例与原型

    当获取实例的属性时,如果找不到,就会查找与对象关键的原型的属性,如果还找不到就找原型的原型,一直找到最顶层为止

    function Person(){
    }
    Person.prototype.name = '小花'
    var person = new Person()
    person.name = '大花'
    console.log(person.name) //大花
    delete person.name
    console.log(person.name)  //小花
    

    这个例子中给实例对象person添加了name 属性,当我们打印person.name的时候,结果自然为大花
    当我们删除了实例对象的name属性,读取person的name时,从person对象中找不到name属性就会从person的原型(person._proto _)上找,也就是Person.prototype,找到了name属性,结果为小花
    但万一找不到那?原型的原型又是什么?

    原型的原型

    在前面讲,原型其实也就是个对象,既然是对象,我们就以最原始的方法创建它,那就是:

    var object = new Object()
    object.name = '小花'
    console.log(object.name)
    

    其实原型对象就是通过Object构造函数生成的,结合之前所讲,实例的_proto _指向构造函数的prototype,所以我们再更新关系图:
    在这里插入图片描述

    原型链

    简单回顾一下构造函数、原型和实例之间的关系:
    每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原生对象的内部指针。那么我们假如让原型对象等于另一个类的实例,结果会怎么样?显然此时,原型对象包含一个指向另一个原型的指针,相应的另一个原型也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例,那么上述关系依然成立。如此层层递进,就构成了实例与原型的链条。这就是所谓的原型链的概念。

    简单来说就是上实例与原型原型与原型的过程

    综上所诉:那Object.pprototype的原型呢

    console.log(Object.prototype._proto _ === nulll) //true
    

    null表示没有对象,即此处不应该有值

    最后一张关系图可以更新为:
    在这里插入图片描述
    图中由相互关联的原型组成的链状结构就是原型链,也就是蓝色的这条线。

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,206
精华内容 4,882
关键字:

原型和原型链