原型与原型链

题目：

• 如何准确判断一个变量是数组类型
• 写一个原型链继承的例子
• 描述 new 一个对象的过程
• zepto(或其他框架)源码中如何使用原型链

知识点：1.构造函数 2.构造函数扩展 3.原型规则和示例 4.原型链 5.instanceof

1、构造函数：

2、构造函数扩展：

var a = {} 其实是var a = new Object() 的语法糖

var b = [] 其实是var b = new Array() 的语法糖

function Foo() 其实是var Foo = new Function() 的语法糖

使用instanceof判断一个函数是否是一个变量的构造函数

3、原型规则5条--原型规则是学习原型链的基础

• 所有引用类型（对象、函数、数组）都具有对象特性，即可自由扩展属性（除null以外）
• 所以引用类型（对象、函数、数组）都有一个__proto__（隐式原型）属性，属性值是一个普通对象
• 所有的函数，都有一个prototype（显式原型）属性，属性值也是一个普通对象
• 所有的引用类型（对象、函数、数组），__proto__属性指向它的构造函数的“prototype”属性值
• 当试图得到一个引用类型的某个属性时，如果这个对象本身没有这个属性，那么会去它的__proto__（即它的构造函数的prototype）中寻找

instanceof：用于判断引用类型属于哪个构造函数的一个方法 

解题：

1、

.

如果面试问这个问题，实质上是在考查对原型的理解

要理解instanceof是怎么查找的——通过上面的5条原型规则，1.因为所有引用类型都具有可以自由扩展属性的对象特性，所以就有了语言内置隐式原型__proto__存在的条件，2.又基于第一条原型规则，所有函数都扩展了一个显式原型prototype属性，它和隐式原型的属性值都是一个普通对象，3.所有引用类型的隐式原型都指向该构造函数的显示原型，即它们是相等的，4、当试图得到某个引用类型的属性时，如果这个对象本身不存在这个属性，就会去寻找它的隐式原型__proto__，由原型规则4，即也就是寻找它的构造函数的显式原型，又因为隐式原型和显式原型它们的属性值都是普通对象（引用类型），当然它们（这个普通对象）也有隐式原型__proto__，就这样通过查找__proto__来确认该引用类型的构造函数类型。

 2、写一个原型链继承的例子

Dog构造函数的显式原型的值是一个普通对象，在这里它的值是Animal构造函数的实例对象，但实例化Dog构造函数时，实例对象hashiqi首先会从自身属性中去寻找，如果没有找到，会从自身的隐式原型__proto__中找，因为自身隐式原型指向自己的构造函数的显式原型prototype，又显式原型是一个普通对象，它也有自己的__proto__属性，就这样一层一层往上寻找，如果在Object构造函数中还没有找到，则返回null。

 3、描述new一个对象的过程：

1. 创建一个新对象
2. this指向这个新对象
3. 执行代码，即对这个this赋值
4. 返回this

4、zepto(或其他框架)源码中如何使用原型链？

阅读源码是高效提高技能的方式

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,world!</p>').on('click',function () {
    alert('clicked')
}).html('<div>Javascript</div>')

这是推荐实际面试中用到的原型例子，是jq源码封装方法的方式且支持链式调用

 ——学习慕课网 双越老师 《前端JavaScript面试技巧》总结笔记