js中原型与原型链详解

在js中理解原型与原型链，需先从构造函数开始理解。以下分知识点介绍原型及原型链，并在文末给出一个原型链继承的实例。

1.构造函数

// 构造函数名首字母大写
function Foo(name,age){
  this.name = name
  this.age = age
  this.cllass = 'class-1'
  // return this  //默认有return this
}
var f = new Foo('zhangsan',20) // 通过构造函数 可以new创建很多个对象

new一个构造函数返回一个对象的过程：
1.把参数传到构造函数，如果没有参数的话就不用传到构造函数
2.首先把this变成一个空对象
3.属性的赋值
4.return this

这个时候返回的对象就具有构造函数的属性

2.构造函数-扩展

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

3.原型规则和示例

5条原型规则
原型规则是学习原型链的基础
1.所有引用类型（数组、对象、函数），都具有对象特性，即可以自由扩展属性（除了“null”之外）
---
var obj = {};obj.a = 100;
var arr = [];arr.a = 100;
function fn (){

}
fn.a = 100;
---
2.所有的引用类型（数组、对象、函数），都有一个__proto__属性，属性值是一个普通的对象
---
__proto__ ：隐式原型
console.log(obj.__proto__)
console.log(arr.__proto__)
console.log(fn.__proto__)
---
3.所有的函数，都有一个prototype属性，属性值也是一个普通对象
---
prototype ：显式原型
console.log(fn.prototype)
---
4.所有的引用类型（数组、对象、函数），__proto__属性值指向它的构造函数的"prototype"属性值
---
console.log(obj.__proto__ === Object.prototype)
---
5.当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的__proto__（即它的构造函数的prototype）中去寻找
---
// 构造函数
function Foo(name,age){
  this.name = name;
  this.age = age;
  return this
}
Foo.prototype.alertName = function(){
  alert(this.name)
}
// 创建实例
var f = new Foo('zhangsan)
f.printName = function(){
  console.log(this.name)
}
// 测试
f.printName()
f.alertName()
---
this的指向 调用的对象自身 this指向f
// 遍历对象具有的属性
var item
for(item in f){
  // 高级浏览器已经在 for in 中屏蔽了来自原型的属性
  // 但是这里建议还是加上这个判断，保证程序的健壮性
  if(f.hasOwnProperty(item)){
    console.log(item)
  }
}

4.原型链

f.toString()
f自身没有toString这个方法，所以去它的__proto__中找，即去Foo的prototype中找，
Foo的protype中没有这个属性，则去Foo的__proto__中寻找，即去Foo的构造函数Object的prototype中找

5.instanceof

用于判断引用类型属于哪个构造函数

var a = {}
a instancsof Object  // true

判断逻辑
f instanceof Foo
f的__proto__一层一层往上，能否对应到Foo.prototype
再试着判断 f instanceof Object

原型继承链例子：

// 写一个封装DOM查询的例子
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('hello world')
div1.on('click',function(){
  alert('clicked')
})

// 链式操作
div1.html('hello world').on('click',function(){
  alert('clicked')})

文完结。