原型和原型链

所有的引用类型(数组、对象、函数)都具有对象特性,即可自由扩展属性(除了'null')

例: 

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

所有的引用类型(数组、对象、函数)多有一个__proto__属性,属性值是一个普通的对象(除了'null')

例:

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

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

例:

prototype // 显式原型
console.log(fn.prototype)

所有的引用类型(数组、对象、函数)__proto__属性指向它的构造函数prototype属性值

例:

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

当试图得到一个对象的某个属性,如果这个对象本身没有这个属性,那么会它的__proto__(即它的构造函数的prototype)中寻找

例:

console.log(obj.__proto__ === Object.prototype);
f.toString() // 要去f.__proto__.__proto__中查找

 原型链查询规则

 

原型链

例:

// 动物
  function Animal() {
    this.eat = function() {
      console.log('animal eat');
    }
  }
  // 狗
  function Dog() {
    this.bark = function() {
      console.log('dog bark');
    }
  }
  Dog.prototype = new Animal()
  // 哈士奇
  var hashiqi = new Dog()

例:

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(ttpe, fn)
    return this
}
var div1 = new Elem('div')
div1.html('<p>hello</p>').on('click', function() { alert('clicked')}).html('<p>javascript</p>')