原型和原型链

一、构造函数

构造函数函数名以大写字母开头，new创建实例
new一个构造函数返回一个对象的过程：创建一个新对象----this指向该对象-----执行代码，对this赋值----返回this

  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);  //创建多个对象
  console.log(f);

构造函数扩展：
var a={}; ------------var a=new Object();
var arr=[];------------var a=new Array();
function Foo(){};------------var Foo=new Function();
使用instanceof判断引用类型属于哪个构造函数 (变量 instanceof Array/Function/Object; typeof 变量）

二、原型规则

1、所有引用类型都具有对象特性，可自由扩展属性

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

2、所有引用类型都有——proto——（隐式原型）属性，属性值是一个普通对象

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

3、所有的函数都有prototype（显式原型）属性，属性值是一个普通对象

console.log(fn.prototype);

4、 所有引用类型的隐式原型属性指向（===）创建此引用类型的构造函数的显式原型属性

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

5、 当试图得到一个引用类型的某个属性时而这个引用类型本身并没有这个属性时，则去它的——proto——（即它的构造函数的prototype）中寻找

//构造函数
function Foo(name,age){
    this.name=name;
}
//添加属性
Foo.prototype.consoleName=function(){
    console.log(this.name);
}
//创建对象
var f=new Foo('zhangsan',22);
f.printName=function(){
    console.log(this.name);
}
f.printName();
f.consoleName();

判断属性是否是自身定义的：

var str;
for(str in f){
   if(f.hasOwnProperty(str)){
      console.log(str);
   }
}

三、原型链

//构造函数
function Foo(name,age){
    this.name=name;
}
//添加属性
Foo.prototype.consoleName=function(){
    console.log(this.name);
}
//创建对象
var f=new Foo('zhangsan',22);
f.printName=function(){
    console.log(this.name);
}
f.printName();
f.consoleName();
f.toString(); //去f.__proto__(Foo.prototype   值是一个对象).__proto__中查找

属性指向关系（原型属性值为一个普通对象）：
f.__proto__指向Foo.prototype,
Foo是f对象的构造函数，
Foo.prototype.__proto__指向Object.prototype,
Object是Foo.prototype对象的构造函数，
Object.prototype.__proto__指向null （特例）

四、封装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);
   return this;  //链式操作
}
var div1=new Elem('div1');
//console.log(div1.html());
div1.html('<p>hello imooc</p>').on('click',function(){
  console.log('clicked');
}).html('<p>javascript</p>');