原型和原型链

vegan.qian
发布于: 2020-08-20 11:58:06
在JavaScript中,每一个函数(箭头函数除外)都有一个prototype属性,这个属性是一个指针并指向一个对象,这个对象的用途是包含了可以由特定类型的所有实例共享的属性和方法。

1. 原型链

每个实例对象(object)都有一个私有属性(proto)指向它的构造函数的原型对象(prototype),从而继承它的属性和方法。该原型对象也有一个自己的属性**proto,一层一层、依次类推,直到一个对象的原型对象为null。根据定义null没有原型,并作为这个原型链中的最后一层**。这种关系被称为原型链(prototype chain),它解释了为何一个对象会拥有定义在其他对象中的属性和方法。

构造函数、原型和实例之间的关系如下图:

image.png)

  • 构造函数通过关键字new创建实例
  • 实例的__proto__属性指向构造函数的原型对象
  • 构造函数的prototype属性指向其原型对象(obj.__proto__ === Object.prototype)
  • 原型对象的constructor属性指向其构造函数
  • 原型对象中也有__proto__属性,指向其原型对象。

2. 实现继承的方式

  • 使用Object.create
const a = {
  name: 'Jack',
  age: 21
}

const b = Object.create(a)

console.log(b, b.__proto__)

// b.__proto__ === a
  • 使用class关键字
class P {
  constructor(name) {
    this.name = name
  }
}

class T extends P{
  constructor(name, age) {
    super(name)
    this.age = age
  }
}

const t = new T('Jack', 21)

3. 判断是否为自身属性

  • hasOwnProperty 是从 Object.prototype 中继承的方法,用于判断某个属性是否属于对象自身,而不是从原型链继承
const a = Object.create({age: 21})
a.name = 'Jack'

a.hasOwnProperty('name') // true
a.hasOwnProperty('age') //false
  • Objeckt.keys,该方法返回一个数组,数组中的值为对象的自身属性(不会获取原型链上的属性)的key
Object.keys(a) // ["name"]

及时获取更新,了解更多动态,请关注https://www.gogoing.site

如果你觉得这篇文章对你有帮助,欢迎关注微信公众号-前端学堂,更多精彩文章等着你!

评论
fallback