JavaScript高级面试题（2）

只是部分笔记

题目：
1.说一个原型的实际应用
2.原型如何体现它的扩展性

1.原型实际应用-jQuery使用

jQuery使用原型：

var $p = $('p')
var $div1 = $('#div1')

实例不同，但是可以使用同一个方法，说明构造函数是一个，可以使用同一个构造函数上的原型方法。

jQuery上使用原型原理

$就是jQuery，看下面代码：

$('p')

var jQuery = function(selector){
   //注意new关键字，第一步就找到了构造函数(new就是使用构造函数，下面init就是构造函数)
	return new jQuery.fn.init(selector);
}

//定义构造函数（构造函数init）
var init = jQuery.fn.init = function(selector){
	var slice = Array.prototype.slice
	var dom = slice.call(document.querySelectorAll(selector))

	var i,len=dom?dom.length:0
	for(i=0;i<len;i++) this[i] = dom[i]
	this.length = len
	this.selector = selector || ''
}

构造函数需要定义原型（及通过原型上定义方法，构造函数是init，原型是init.prototype即jQuery.fn）：

//初始化 jQuery.fn
jQuery.fn = jQuery.prototype = {
	constructor:jQuery,

	//其他函数...
	css:function(key,value){

	},
	html:function(value){

	}
}

//定义原型
init.prototype = jQuery.fn;

整体过程：实例$(‘p’)，对应一个函数，函数内返回一个构造函数，找到构造函数init，然后定义init的原型init.prototype即jQuery.fn，然后在原型中定义方法。

更多可以参考：
https://www.jianshu.com/p/3786121bef2c
https://feiyeguohai.iteye.com/blog/1055008
https://zhuanlan.zhihu.com/p/32706613
https://www.cnblogs.com/haogj/archive/2010/04/20/1716178.html
https://www.cnblogs.com/haogj/archive/2010/04/19/1715762.html
https://www.cnblogs.com/code-lzh/p/9480394.html
http://www.nowamagic.net/librarys/veda/detail/653

2.原型实际应用-Zepto

3.原型实际应用总结

jQuery和zepto都是基于原型的继承方式

4.原型扩展性-插件机制

先看jQuery原型实现

为什么要有jQuery.fn = jQuery.prototype中要有jQuery.fn?

这就与jQuery扩展插件有关了。

jQuery如何扩展插件（插件可以例如有轮播图、tab切换），下面就是原理：

$.fn.getNodeName = function(){
	return this[0].nodeName
}

最终目的是方法放入到原型中。扩展并不是直接给原型赋值，而是实际上通过$.fn赋值，而且只有‘‘‘$```暴露在全局变量。

$.fn其实就是jQuery.fn。

$.fn方法扩展插件放到原型上的好处：

1.只有$会暴露在window全局变量
2.将插件扩展统一到$.fn.xxx这一接口，方便调用

问题解答

说一下jQuery和zepto的插件机制
结合自己的开发经验，做过的基于原型的插件

5.总结

问题解答

说一个原型的实际应用
1.描述一下jQuery如何使用原型（入口函数$ 构造函数init 入口函数的原型）
2.描述一下zepto如何使用原型
3.再结合自己的项目经验，说一个自己开发的例子

原型如何体现它的扩展性
1.说一下jQuery和zepto的插件机制
2.结合自己的开发经验，做过的基于原型的插件

附注：继承和原型链可以参考：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain