js原型链

1.写一个原型链继承的例子

function Animail() { this.eat = function () { console.log('动物吃东西') } }

function Dog () { this.bark = function () { console.log('wangwang') } }

Dog.prototype = new Animail()

Dog.prototype.constructor = Dog.constructor

var d = new Dog()

d.eat() // 动物吃东西

2.获取页面元素显示内容绑定事件

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('tanke1');

console.log(div1.html())

div1.html('<div>click me</div>').on('click', ()=>{console.log(111111)})

3.new 一个对象的过程

1.创建一个新对象

2.this 指向这个新对象

3.执行代码，即对 this 赋值

4.返回 this

new 的过程：

1.var f = new Foo('zhangsan',20)  将参数传进去，函数中的 this 会变成空对象

2.this.name = name;this.age = age;this.class = 'class-1' 为赋值；return this 为实际的运行机制

3.return 之后赋值给 f ，f 具备了 f.name = zhangsan、f.age = 20、f.class = 'class-1'

4.继续执行到 f1 ,则 f1.name = lisi、f1.age = 22、f1.class = 'class-1'

所有的引用类型（数组、对象、函数）， _proto_ 属性值(隐式原型属性）指向它的构造函数的“prototype”属性值

for (item in obj) {
    if (obj.hasOwnProperty(item)) {
        // 通过则表明它是 f 自身的属性，未通过则表明 是 f 通过原型获得的属性    
}

}

原型链

f.toString(),当这个对象没有这个属性的时候，去它自身的隐式原型中找，它自身的隐式原型就是它构造函数（Foo）的显式原型（Foo.prototype）但显式原型（Foo.prototype）中并没有 toString ;但显式原型（Foo.prototype）也是对象，也要在它的隐式原型中找，即在其构造函数 （Object ）的显式原型中去找 toString. 故要在 f._proto_(隐式原型）的._proto_(隐式原型）中找，如图所示，故输出 null。

原型链介绍