JavaScript高级面试题（2）_高级js 面试提

作者：不正经 | 2024-03-30 09:12:14

踩

高级js 面试提

只是部分笔记

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

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

jQuery使用原型：

在这里插入图片描述

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

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

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 || ''
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

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

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

	},
	html:function(value){

	}
}

//定义原型
init.prototype = jQuery.fn;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

2.原型实际应用-Zepto

3.原型实际应用总结

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

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

先看jQuery原型实现

在这里插入图片描述

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

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

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

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

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

$.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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/339953?site