JavaScript 原型和原型链

知识点：构造函数；构造函数—扩展；原型规则和示例；原型链；instanceof 

构造函数：

• 用大写字母开头来命名（Foo），写代码时也要遵循这个规范
• 基于一个构造函数可以 new 出很多的函数，类似于模板的这样一个机制
• new 一个构造函数返回一个对象的过程：
  1. new 时把参数传进去（也可以不传参）
  2. new 这个函数时，函数里的 this 会变成空对象
  3. 用 this. 为属性赋值，再把 this 给 return 回来（这个 return 是默认的）
  4. 赋值给 f，此时 f 具有 f.name f.age f.class

function Foo(name, age) {
    this.name = name
    this.age = age
    this.class = 'class-1'
    // return this  // 默认有这一行
}
var f = new Foo('zhangsan', 20)
// var f1 = new Foo('lisi', 22)  // 创建多个对象

 构造函数-扩展：

• var a = {} 其实是 var a = new Object() 的语法糖
• var a = [] 其实是 var a = new Array() 的语法糖
• function Foo(){...} 其实是 var Foo = new Function(...) 的语法糖
• 使用 instanceof 判断一个函数是否是一个变量的构造函数
  • 判断一个变量是否为“数组”：变量 instanceof Array

原型规则和示例：（5 条原型规则；原型规则是学习原型链的基础）

• 所有的引用类型（数组、对象、函数），都具有对象特性，即可自由扩展属性（除了null以外）
• 所有的引用类型（数组、对象、函数），都有一个__proto__（隐式原型）属性，属性值是一个普通的对象
• 所有的函数，都有一个prototype（显式原型）属性，属性值也是一个普通的对象
• 所有的引用类型（数组、对象、函数），__proto__属性值指向它的构造函数的prototype属性值
• 当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的__proto__（即它的构造函数的prototype）中寻找

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

console.log(obj.__proto__);
console.log(arr.__proto__);
console.log(fn.__proto__);

console.log(fn.prototype)

console.log(obj.__proto__ === Object.prototype)

// 构造函数
function Foo(name, age) {
    this.name = name
}
Foo.prototype.alertName = function () {
    alert(this.name)
}
// 创建示例
var f = new Foo('zhangsan')
f.printName = function () {
    console.log(this.name)
}
// 测试
f.printName()
f.alertName()   // f 的隐式原型指向了 Foo 的显式原型

补充两点：

• 【 this 】f 通过对象的属性来执行函数的时候，无论函数是自身的属性还是函数从它的原型中得到的属性，this 永远指向函数自身（即：所有的从原型或者更高级的原型中得到、执行的方法，其中的this在执行时，就指向了当前这个触发事件执行的对象。因此 printName 和 alertName 中的 this 都是 f）
• 【循环对象自身的属性】alertName 不是函数 f 本身自带的属性，但在遍历的时候会遍历到，所以为了防止遍历，需要加一个判断（如下图）

// 如何判断一个这个属性是不是对象本身的属性呢？使用hasOwnProperty，常用的地方是遍历一个对象的时候

var item
for (item in f) {
    // 高级浏览器已经在 for in 中屏蔽了来自原型的属性，但是这里建议大家还是加上这个判断，保证程序的健壮性
    if (f.hasOwnProperty(item)) {
        console.log(item)
    }
}

原型链：

// 构造函数
function Foo(name, age) {
    this.name = name
}
Foo.prototype.alertName = function () {
    alert(this.name)
}
// 创建示例
var f = new Foo('zhangsan')
f.printName = function () {
    console.log(this.name)
}
// 测试
f.printName()
f.alertName()

// 比上一个例子多这一行
f.toString()   // 要去 f._proto_._proto_ 中查找

1. 因为f本身没有toString()，并且f.__proto__（即Foo.prototype）中也没有toString
2. 当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的__proto__（即它的构造函数的prototype）中寻找
3. 如果在f.__proto__中没有找到toString，那么就继续去f.__proto__.__proto__中寻找，因为f.__proto__就是一个普通的对象而已
4. 这样一直往上找，你会发现是一个链式的结构，所以叫做“原型链”
5. 直到找到最上层都没有找到，那么就宣告失败，返回undefined
6. 最上层是什么 ———— Object.prototype.__proto__ === null

（方框为构造函数，圆角框为对象）

注：Object.prototype 指向的是 null，这是一个特例，js 避免死循环做的特例

instanceof：用于判断引用类型属于哪个构造函数的方法

（用上面的代码）

• f instanceof Foo 的判断逻辑是：
  • f 的 _proto_ 一层一层往上，能否对应到 Foo.prototype
• f instanceof Object 的判断逻辑是：
  • 判断 f 的原型一层一层往上，能否对应到 Object.prototype