侧边栏壁纸
博主头像
uvdream博主等级

一切皆有可能!

  • 累计撰写 37 篇文章
  • 累计创建 21 个标签
  • 累计收到 18 条评论

【查缺补漏】JavaScript原型链

uvdream
2021-09-04 / 0 评论 / 13 点赞 / 629 阅读 / 2,183 字
温馨提示:
本文最后更新于 2022-04-08,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

原型链

定义

原型链是由原型对象组成,每个对象都有 __proto__ 属性,指向了创建该对象的构造函数的原型, __proto__ 将对象连接起来组成了原型链.是一个用来实现继承和共享属性的有限的对象链.

  • 属性查找机制: 当查找对象的属性时,如果实例对象自身不存在该属性,则沿着原型链往上一级查找,找到时则输出,不存在时,则继续沿着原型链往上一级查找,直至最顶级的原型对象 Object.prototype,如还是没找到,则输出 undefined;
  • 属性修改机制: 只会修改实例对象本身的属性,如果不存在,则进行添加该属性,如果需要修改原型的属性时,则可以用: b.prototype.x = 2;但是这样会造成所有继承于该对象的实例的属性发生改变.

prototype :原型

_proto__:原型链(连接点)

获取原型


- es5

console.log(person.__proto__)

+ es6

console.log(Object.getPrototypeOf(person))

从属关系

prototype->函数的一个属性:对象{}

__proto__->对象 Object 的一个属性:对象{}

对象的__proto__保存着该对象的构造函数的prototype

原型链


var Person=function(){

    this.a=1

}

Person.prototype.b=2

Object.prototype.c=3

var person=new Person()

// 原型链

console.log(person.__proto__===Person.prototype)//true

console.log(Person.prototype.__proto__===Object.prototype)//true

console.log(Object.prototype.__proto__)//null

// 特殊情况

console.log(Object.__proto__===Function.prototype)//true

console.log(Function.__proto__===Function.prototype)//true

//由此得出

console.log(Function.__proto__===Object.__proto__)//true

console.log(person.a)

console.log(person.b)

console.log(person.c)

//属性是否存在

//1.检查是否存在自身而不是原型链

console.log(person.hasOwnProperty('a'))//true

console.log(person.hasOwnProperty('b'))//false

console.log(person.hasOwnProperty('c'))//false

//2.检查是否存在原型链

console.log('a' in person)//true

console.log('b' in person)//true

console.log('c' in person)//true

console.log("------")

console.log(person.constructor==Person)//true

console.log(Person.prototype.constructor==Person)//true

原型链 (2)

拓展

构造函数,原型和实例关系

  • 原型(prototype): 一个简单的对象,用于实现对象的 属性继承.可以简单的理解成对象的爹.在 Firefox 和 Chrome 中,每个 JavaScript 对象中都包含一个__proto__ (非标准)的属性指向它爹(该对象的原型),可 obj.__proto__进行访问.
  • 构造函数: 可以通过 new 来 新建一个对象 的函数.
  • 实例: 通过构造函数和 new 创建出来的对象,便是实例. 实例通过__proto__指向原型,通过 constructor 指向构造函数.

constructor(指向构造函数)

未修改原型


var Person=function(){

    this.a=1

}

var person=new Person()

//此时的constructor

console.log(person.constructor===Person)//true

console.log(person.constructor)

修改了原型


var Person=function(){

    this.a=1

}

+Person.prototype={

+   b:2

+ }

var person=new Person()

//此时的constructor

console.log(person.constructor===Person)//false

如何解决,重定向下指向


var Person=function(){

    this.a=1

}

 Person.prototype={

   b:2

+ constructor:Person

 }

var person=new Person()

//此时的constructor

console.log(person.constructor===Person)//false

0

评论区