原型规则与原型链

5个原型规则是学习原型链的基础。

1. 所有的引用类型（数组、对象、函数），都可自由扩展属性。

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

   2.所有的引用类型，都有一个_proto_属性，属性值是一个普通的对象。

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

  3.所有的函数，都有一个prototype属性，属性值也是一个普通的对象。

console.log(fn.prototype);

  4.所有的引用对象，_proto_属性值指向它的构造函数的prototype属性值。

console.log(obj._proto_ === Object.prototype);

  5.当试图得到一个引用类型的某个属性值时，如果这个对象本身没有这个属性，那么会去它的_proto_（即它的构造函数的          prototype）中寻找。

//构造函数
function Foo(name,age){
	this.name = name;
}
Foo.prototype.alertName = function(){
	alert(this.name)
}

//创建对象
var f = new Foo('xiaoming')
f.printName = function(){
	console.log(this.name)
}

//测试
f.printName()
f.alertName()

一个原型链继承的例子：

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)
 	return this
 }


var div1 = new Elem('div')
div1.html('<p>hello imooc</p>').on('click',function(){
	alert('clicked')
}).html('<p>javasctipt</p>')