JavaScript高级面试题（2）

我不是女神ヾ 2021-12-11 02:13 279阅读 0赞

只是部分笔记

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

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

jQuery使用原型：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]

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_www.jianshu.com_p_3786121bef2c]  
[https://feiyeguohai.iteye.com/blog/1055008][https_feiyeguohai.iteye.com_blog_1055008]  
[https://zhuanlan.zhihu.com/p/32706613][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_20_1716178.html]  
[https://www.cnblogs.com/haogj/archive/2010/04/19/1715762.html][https_www.cnblogs.com_haogj_archive_2010_04_19_1715762.html]  
[https://www.cnblogs.com/code-lzh/p/9480394.html][https_www.cnblogs.com_code-lzh_p_9480394.html]  
[http://www.nowamagic.net/librarys/veda/detail/653][http_www.nowamagic.net_librarys_veda_detail_653]

**2.原型实际应用-Zepto**

**3.原型实际应用总结**

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

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

先看jQuery原型实现

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]

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

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

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

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

最终目的是方法放入到原型中。扩展并不是直接给原型赋值，而是实际上通过 . f n 赋 值 ， 而 且 只 有 ‘ ‘ ‘ .fn赋值，而且只有\`\`\` .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][https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Inheritance_and_the_prototype_chain]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]: /images/20211210/996f3974459b4dbaa39e4ca2194500e1.png
[https_www.jianshu.com_p_3786121bef2c]: https://www.jianshu.com/p/3786121bef2c
[https_feiyeguohai.iteye.com_blog_1055008]: https://feiyeguohai.iteye.com/blog/1055008
[https_zhuanlan.zhihu.com_p_32706613]: 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/20/1716178.html
[https_www.cnblogs.com_haogj_archive_2010_04_19_1715762.html]: https://www.cnblogs.com/haogj/archive/2010/04/19/1715762.html
[https_www.cnblogs.com_code-lzh_p_9480394.html]: https://www.cnblogs.com/code-lzh/p/9480394.html
[http_www.nowamagic.net_librarys_veda_detail_653]: http://www.nowamagic.net/librarys/veda/detail/653
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]: /images/20211210/94ef43087ea34a2c8439bed8d6382bac.png
[https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Inheritance_and_the_prototype_chain]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain