原型链

发表于 | 阅读次数

原型

了解原型链，我们先了解下原型

  1. 所有的对象都有toString()、valueOf()、constructor、hasOwnProperty()等
  2. 所有的数组都是有对象应该有的属性
  3. 所有的数组都有push()、shift()、join()、slice()、splice()等
  4. var array = [] 应该有数组共有的所有属性
1
var array = []

我们用console.dir()检测下array有什么属性

我们发现 console.dir(array) 打出来的结果是：

  1. array 有一个属性叫做__proto__（它是一个对象）
  2. array.__proto__ 有很多属性，包括 push()、shift()、join()、slice()、splice()等
  3. array.__proto__ 其实也有一个叫做 __proto__ 的属性，包括toString()、valueOf()、constructor、hasOwnProperty()等
  4. array.__proto__.__proto__ 其实也有一个叫做__proto__ 的属性（console.log 没有显示），值为 null

原型链

当我们读取 array.toString 时，JS 引擎会做下面的事情：

  1. 看看 array 数组本身有没有 toString 属性。没有就走到下一步。

  2. 看看 array.__proto__ 有没有 toString 属性，发现 array.__proto__ 有 toString 属性，于是找到了

所以 array.toString 实际上就是第 2 步中找到的 array.__proto__.toString。

可以想象，

  1. 如果 array.__proto__ 没有，那么浏览器会继续查看 array.__proto__.__proto__

  2. 如果 array.__proto__.__proto__ 也没有，那么浏览器会继续查看 array.__proto__.__proto__.__proto__

  3. 直到找到 toString 或者__proto__ 为 null。

上面这个搜索过程，是连着由__proto__ 组成的链子一直走的。

这个链子，就叫做原型链。

API

hasOwnProperty() 方法

hasOwnProperty() 方法会返回一个布尔值，指示对象是否具有指定的属性作为自身（不继承）属性。

1
var o = {
2
  name:'jack'
3
}
4
o.hasOwnProperty('name'); // true
5
o.hasOwnProperty('toString'); // false

Object.create() 方法

Object.create() 方法使用指定的原型对象和其属性创建了一个新的对象。

1
var a ={
2
  name:'jack'
3
}
4
var b = {
5
  form:'china'
6
}
7
a = Object.create(b)

prototype

对象.__proto__ === 对象.constructor.prototype

1
function Person(){}
2
Person.prototype.name = 'jack'
3
var person= new Person()
4
console.log(person.name)  // jack
5
console.log(person.__proto__ === Person.prototype) // true
6
console.log(Person.__proto__ === Person.constructor.prototype) // true
7
console.log(Person.__proto__ === Function.prototype) //true
8
console.log(Person.prototype.constructor === Person) // true
9
console.log(Object.prototype.__proto__ === null) // true
10
console.log(Object.prototype.constructor === Object) // true
11
console.log(person.constructor === Person) // true
12
console.log(person.constructor === Person.prototype.constructor) // true

只有对象才有__proto__，只有函数才有 prototype。