原型和原型链

涉及的面试题

instanceof的原理

A instanceof B

instanceof的运算符的第一个变量是一个对象，暂时称为A，第二个变量一般是一个函数，暂时称为B
instanceof的判断规则:沿着A的__proto__这条线来找，同时沿着B的prototype这条线来找，如果两个线能找到同一个引用，即同一个对象，那么就返回true。如果找到终点还未重合，则返回false。

按照以上规则，大家看看 f1 instanceof Object 这句代码是不是true?根据上图很容易就能看出来，就是true。

通过上面的规则你可以解释很多怪异的现象.例如:

console.log(Object instanceof Function )  //true
console.log(Function instanceof Object )  //true
console.log(Function instanceof Function )  //true

涉及的面试题

什么是原型链?如果理解原型

最简单准确的答案:

访问一个对象的属性时，先在基本属性中查找，如果没有，再沿着__proto__这条链向上找，这就是原型链.

当我们创建一个对象时，let obj={age:12}，我们发现有很多能使用很多函数，但是我们明明没有定义过它们，对此你是否有过疑惑?

当我们在浏览器中打印obj的时候，你就会发现在obj上面居然有一个__proto__属性，那么看来之前的疑问就和这个属性有关了。
其实JS的每个对象都有__proto__属性，这个属性指向了原型。这个属性不推荐我们直接去使用它，从大家使用的编辑器就可以看出来，没有__proto__的提示语法。这只是浏览器在早期为了让我们访问到内部属性prototype来实现的一个东西.来看看__proto__里面有啥?

原型其实也是一个对象，并且这个对象包含了很多函数，所以我们可以得出一个结论:对于obj来说，可以通过__proto__找到一个原型对象，在该对象中定义了很多函数让我们使用.

涉及的面试题

如果判断一个变量是数组?

1 使用instanceof

这种方法原理就是原型链，但是在项目中可能不准确，当项目中有多个框架的时候，就意味着有多个执行环境，这时候的instanceof就可能判断出错.因此就有了第二种方法的出现

2 Array.isArray(变量)

这个方法就是用来判断变量是否是数组的.

涉及的面试题

描述new一个对象的过程

1.创建一个新对象

2.设置这个新的对象的内部、可访问性和[[prototype]]属性为构造函数（指prototype.construtor所指向的构造函数）中设置的((this指向这个对象) )

3.执行构造函数中的代码(执行构造函数，当this关键字被提及的时候，使用新创建的对象的属性； 返回新创建的对象（除非构造方法中返回的是‘无原型’）。 )

4.返回新对象(返回this)

涉及的面试题

写一个继承链的例子?(封装一个DOM查询)

/**
 * 原型链继承的例子
 * 功能: 1.获取元素改变或者获取他的innerhtml。
 *       2.添加事件。

function Elem(id) {
    this.elem = document.getElementById(id)
}
Elem.prototype.html = function(val) {
    let elem = this.elem;
    if (val) {
        elem.innerHTML = val
        return this //链式操作
    } else {
        return elem.innerHTML
    }
}
Elem.prototype.on = function(type, fn) {
    let elem = this.elem;
    elem.addEventListener(type, fn)
    return this
}
let div1 = new Elem()
console.log(div1.html())
div1.html("<p>hello World").on('click', function() {
    alert('Hello')
})