关于前端:拾遗记2js原型链

31次阅读

共计 1260 个字符,预计需要花费 4 分钟才能阅读完成。

原型(对象属性)

在 JavaScript 中,每一个函数都有一个对象属性(prototype), 其指向另一个对象。

为何要设计 prototype 对象属性?
JavaScript 语言在设计时,其设计师不想将这门语言设计的过为简单,不想进步语言学习门槛,因而没有引入类。然而其借鉴了 new 关键字,通过 new 关键字加构造函数的形式创立实例对象。如果只有构造函数,那么怎么实现多个实例对象之间共享属性和办法呢?为了实现共享,设计师为构造函数增加了 prototype 属性,该属性指向一个对象,所有实例之间共享的属性和办法就放在这个对象上,不须要共享的属性和办法就放在构造函数外面,实例对象在创立实现之后,将主动引入 prototype 对象的属性和办法。

function Person(name) {this.name = name}
// 原型上增加一个共享方法
Person.prototype.say = function () {console.log(`my name is ${this.name}`)
}
let zs = new Person('zhangsan')
// 实例对象能够拜访原型上的共享方法
zs.say()

原型链

在原型中咱们得悉,所有的构造函数都有一个 prototype 属性,由此构造函数创立的实例对象都能主动获取 prototype 下面共享的属性和办法。那么实例对象是如何获取的?实例对象都有实例对象和原型之间的一种链接,也就叫原型链。

function Person(name) {this.name = name}
Person.prototype.say = function () {console.log(`my name is ${this.name}`)
}
let zs = new Person('zhangsan')
// 实例对象 proto 属性指向构造函数的原型
console.log(zs.__proto__ === Person.prototype) // true

因为原型也是一个对象,能够看作是 Object 的一个实例,因而,其__proto__属性指向 Object 的原型。

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

因为所有 function 都是由 Fucntion 生成的,也就是所有的函数能够看作是 Function 的实例对象,因而函数的__proto__指向 Function 的原型。

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

constructor

在每个函数的原型 prototype 中都有 constructor 属性,它保留了对函数的援用。

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

// 因为 constructor 保留了一个援用,因而能够用其实例化一个对象
let lisi = new Person.prototype.constructor('lisi')
lisi.say()

正文完
 0