JS基础之原型与原型链

JS原型与原型链

一、基础入门

1. 对象
   在JS中，万物皆对象，对象又分为普通对象和函数对象，其中Object、Function为JS自带的函数对象。

var obj1 = {}; 
var obj2 = new Object();
var obj3 = new fun1()

function fun1(){}; 
var fun2 = function(){};
var fun3 = new Function('some','console.log(some)');

// JS自带的函数对象
console.log(typeof Object); //function 
console.log(typeof Function); //function  

// 普通对象
console.log(typeof obj1); //object 
console.log(typeof obj2); //object 
console.log(typeof obj3); //object

// 函数对象
console.log(typeof f1); //function 
console.log(typeof f2); //function 
console.log(typeof f3); //function   

凡是通过 new Function() 创建的对象都是函数对象，其他的都是普通对象。fun1、fun2归根结底都是通过 new Function()的方式进行创建的。Function Object 也都是通过 New Function() 创建的。

2. 构造函数

function Foo(name, age) {
    // this 默认为空
    this.name = name
    this.age = age
    this.class = 'class'
    // return this // 默认有这一行
}

// Foo 的实例
var f = new Foo('aa', 20)

每个实例都有一个constructor（构造函数）属性，该属性指向对象本身。

f.constructor === Foo // true

JS本身不提供一个class实现。（在 ES2015/ES6 中引入了class关键字，但只是语法糖，JavaScript 仍然是基于原型的）。

3. 构造函数扩展

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

二、原型

首先，贴上

图片来自于http://www.mollypages.org/tutorials/js.mp，请根据下文仔细理解这张图

在JS中，每个对象都有自己的原型。当我们访问对象的属性和方法时，JS会先访问对象本身的方法和属性。如果对象本身不包含这些属性和方法，则访问对象对应的原型。

// 构造函数
function Foo(name) {
    this.name = name
}
Foo.prototype.alertName = function() {
    alert(this.name)
}
// 创建实例
var f = new Foo('some')
f.printName = function () {
    console.log(this.name)
}
// 测试
f.printName()// 对象的方法
f.alertName()// 原型的方法

1. prototype

   所有函数都有一个 prototype （显式原型）属性，属性值也是一个普通的对象。但有一个例外： Function.prototype.bind()

   let fun = Function.prototype.bind()// fun没有prototype属性
   

   当我们创建一个函数时，例如

   function Foo () {}
   

   

   prototype属性就被自动创建了

   我们访问fn.prototype，返回了一个对象，该对象里只有一个属性constructor

2. __proto__

   每个实例对象（object ）都有一个隐式原型属性（称之为__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) // true
   

当new Foo()时，__proto__自动创建了。

new的实现过程

• 新生成了一个对象

• 链接到原型

• 绑定 this

• 返回新对象

  function new_object() {
      // 创建一个空的对象
      let obj = new Object()
      // 获得构造函数
      let Con = [].shift.call(arguments)
      // 链接到原型
      obj.__proto__ = Con.prototype
      // 绑定 this，执行构造函数
      let result = Con.apply(obj, arguments)
      // 确保 new 出来的是个对象
      return typeof result === 'object' ? result : obj
  }
  

3. 总结

• 所有的引用类型（数组、对象、函数）都有对象特性，即可自由扩展属性（null除外）。
• 所有的引用类型，都有一个 __proto__ （隐式原型）属性，属性值是一个普通的对象，该原型对象也有一个自己的原型对象(__proto__) ，层层向上直到一个对象的原型对象为 null。根据定义，null 没有原型，并作为这个原型链中的最后一个环节。
• 当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的__proto__(即它的构造函数prototype)中寻找。

// 构造函数
function Foo(name) {
    this.name = name
}
Foo.prototype.alertName = function() {
    alert(this.name)
}
// 创建实例
var f = new Foo('some')
f.printName = function () {
    console.log(this.name)
}
// 测试
f.printName()
f.alertName()
// 循环对象自身的属性
var item
for (item in f) {
    // 高级浏览器已经在 for in 中屏蔽了来自原型的属性
    // 但是这里还是建议大家还是加上这个判断，保证程序的健壮性
    if (f.hasOwnPrototype(item)) {
        console.log(item)
    }
}

三、原型链

// 构造函数
function Foo(name) {
    this.name = name
}
// 创建实例
var f = new Foo('some')
// 测试
f.toString() // f.__proto__.__proto__中寻找

f.__proto__=== Foo.prototype，Foo.prototype 也是一个对象，也有自己的__proto__ 指向 Object.prototype， 找到toString()方法。
也就是

Function.__proto__.__proto__ === Object.prototype

下面是原型链继承的例子

function Elem(id) {
    this.elem = document.getElementById(id)
}

Elem.prototype.html = function(val) {
    var elem = this.elem
    if (val) {
        elem.innerHtml = val
        return this // 链式操作
    } else {
        return elem.innerHtml
    }
}

Elem.prototype.on = function( type, fn) {
    var elem = this.elem
    elem.addEventListener(type, fn)
}

var div1 = new Elem('div1')
// console.log(div1.html())
div1.html('<p>hello</p>').on('click', function() {
    alert('clicked')
})// 链式操作

暂时就这些，后续我将持续更新