原型和原型链

知识点

JS 是基于原型的语言，原型理解起来非常简单。任何长存不会被遗弃和提到的东西，都是简单的东西。

构造函数

function Person(name, age) {
  this.name = name
  this.age = age
  this.gender = "Male"
}
var p1 = new Person("zhangsan", 23)
// var p2 = new Person("lisi", 21) 可以创建多个实例

以上示例通过函数Person创建了一个实例f1，对应有三个属性name、age、gender，于是我们称Person是p的构造函数。构造函数的概念在高级语言中都是存在的，它类似于一个模版，可以创建多个示例。

构造函数 - 扩展

var a = {}属于var a = new Object()的语法糖
var a = []属于var a = new Array()的语法糖
function Person() {...}属于var Person = new Function(...)的语法糖

而至于如何判断一个变量的构造函数 —— instanceof

几个要点

所有的引用类型（对象、数组、函数），都具有对象特性，即可以自由扩展属性（null除外）
所有的引用类型（对象、数组、函数），都具有__prop__属性，该属性是一个普通对象
所有的函数，都有一个prototype属性，该属性是一个普通对象
所有的引用类型（对象、数组、函数），__prop__属性指向其构造函数的prototype属性

var obj = {}; obj.a = 100
var arr = []; arr.a = 100
var fn = function(){}; fn.a = 100

console.log(obj.__prop__)
console.log(arr.__prop__)
console.log(fn.__prop__)

console.log(fn.prototype)

console.log(fn.prototype == fn.__prop__)

原型

function Person(name, age) {
  this.name = name
}
Person.prototype.speak = function() {
  console.log("Chinease")
}

var p = new Person("zhangsan")
p.say = function() {
  console.log("hello")
}

p.speak()
p.say()

这里执行say可以理解，我们来看下speak的执行流程。p对象试图寻找对象的speak属性，如果对象本身没有这个属性，就会去__prop__上找，也就是构造函数的prototype对象上寻找

那如果我想知道这个属性是不是属于该对象本身的属性，该怎么做？ —— 使用hasOwnProperty方法来判断

var o = {name: "zhangsan"}
for (var key in o) {
  if (o.hasOwnProperty(key)) {
    console.log(o[key])
  }
}

原型链

接着上面的示例，如果p对象调用toString方法。这时候的执行流程应该是：p本身查找不到该属性，于是通过__prop__往上查找（构造函数的prototype属性）；此时发现构造函数也查找不到，则再往上找，发现Object的prototype扩展了该方法，则查找成功并发起调用。和前面解释的原理一样。

而这样往上找的过程，你会发现就类似于一个链式的结构，这也就是原型链。它会一直往上找直到找不到，就返回undefined。那么原型链的顶端是什么？ —— Object.prototype.__prop__ === null，你没看没错，就是一个null

原型链中的`this`

所有从原型或者更高级的原型中得到、执行的方法，其中的this在执行时，已经指向了触发该对象事件的对象。如上面示例中的speak和say中的this都指向p

instanceof

扩展参考

讲解原型和原型链，请参考《深入理解JS原型和闭包系列博客》

最后编辑于：2019.03.30 21:19:57