原型和原型链（二）

Bertha 。 2022-10-22 07:55 223阅读 0赞

接着上一条“类和继承”博客

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70][]

Object可以说是所有引用类型的变量的父类，所有class的父类

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 2][]

*  每个class都有显式原型prototype
 *  每个实例都有隐式原型\_\_proto\_\_
 *  实例的\_\_proto\_\_指向对应class的prototype

class中的sayHi方法是放在它的原型里面的，new出来的xialuo实例中没有sayHi这个属性，就会往它的隐式原型xialuo.\_\_proto\_\_也就是Student的显式原型Student.prototype中寻找。

**切记：**class中写在constructor外面的方法是放在它的原型里面的，通过Student.prototype.sayHi()是可以调用的。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 5][]

Student继承自People，可以理解为，People是Student的原型的构造函数，xialuo和People的关系是：xialuo的原型对象是People的实例对象（可以这样理解）。

当xialuo对象调用sayHi方法时，自己没有就通过隐式原型\_\_proto\_\_去原型找，发现原型有这个方法（因为Student这个类定义的方法是放在Student的原型对象上作为原型对象的（方法）属性的），找到后就调用sayHi方法。

当xialuo对象调用eat方法时，自己没有就就通过隐式原型\_\_proto\_\_去原型找，发现原型也没有这个方法（因为People这个类定义的方法是放在People的原型对象上作为原型对象的（方法）属性的），就再通过隐式原型\_\_proto\_\_去自己的原型的原型（我称之为二级原型）上找，找到后就调用eat方法。

console.log(Student instanceof Object)//true
    console.log(xialuo.hasOwnProperty('name'))//true
    console.log(xialuo.hasOwnProperty('sayHi'))//false
    console.log(xialuo.hasOwnProperty('eat'))//false
    console.log(xialuo.hasOwnProperty('hasOwnProperty'))//false

对象可以通过hasOwnProperty方法判断方法是否是自己本身就有的属性（方法也是属性），而非原型链上的属性（方法也是属性）。它是Object.prototype中的（方法）属性。

Object.prototype的\_\_proto\_\_永远指向null

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 6][]

instanceof工作原理就是左边这个变量顺着隐式原型往上找，看能不能找到原型链上任何一个该类（右边看作类class）的显式原型，如xialuo instanceof Student（People）中的Student（People），是否有显式原型在变量xialuo的原型链上，如果有就返回true，找到Object.prototype还没有就返回false。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 7][]

## 手写一个简易的jQuery，考虑插件和扩展性 ##

<p>文字内容1</p>
    <p>文字内容2</p>
    <p>文字内容3</p>
    <script type="text/javascript">
    	class jQuery{
    		//类数组，类似于数组，实际上是一个对象
    		constructor(selector) {
    			const result = document.querySelectorAll(selector)
    			const length = result.length
    			for(let i = 0;i < length;i++){
    				//比如this[0] = <div>1</div>,this[1] = <div>帅哥</div>
    				this[i] = result[i]//跟this.name = name一样的
    			}
    			this.length = length
    			this.selector = selector
    		}
    		//把第index个元素返回回来
    		get(index){
    			return this[index]
    		}
    		//遍历
    		each(fn){
    			for (let i = 0;i < this.length;i++) {
    				const elem = this[i]
    				fn(elem)
    			}
    		}
    		//监听一个方法
    		on(type,fn){
    			return this.each(elem => {
    				elem.addEventListener(type,fn,false)
    			})
    		}
    		//扩展很多 DOM API
    	}
    	
    	//插件，在原型上添加方法实现模拟插件的作用
    	jQuery.prototype.dialog = function(info){
    		alert(info)
    	}
    	
    	//“造轮子”
    	class myJQuery extends jQuery{
    		constructor(selector) {
                //super执行父类的构造函数，无论父类中对这个selector的处理多复杂，直接继承它的处理了，就不用自己写了，这就是super的价值
    			super(selector)
    		}
    		//扩展自己的方法
    		addClass(className){
    			
    		}
    	}
    	
    	//测试
    	const $p = new jQuery('p')
    	console.log($p)//{0: p, 1: p, 2: p, length: 3, selector: "p"}
    	console.log($p.get(1))//<p>文字内容2</p>
    	const foo = (elem) => console.log(elem.nodeName)
    	$p.each(foo)//3个P
    	const onclick = () => alert('clicked')
    	$p.on('click',onclick)//点击任意元素，弹出弹框
    	$p.dialog('dialog')
    </script>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 8][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 9][]

插件是指做一个插件，但用的还是jQuery，造轮子是基于jQuery去造，但造出来的东西是我自己的（使用新类继承自jQuery这个类来实现）

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70]: /images/20221022/e8268504398946278e1a1cbc334b86fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 1]: /images/20221022/d44650446b84499c9478d112be92eb4f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 2]: /images/20221022/78a31b14b31e4dc48c092dedadcc3611.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 3]: /images/20221022/a36041c5e27d48b4b057e97786ac96f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 4]: /images/20221022/0e0d64a1e9e3442d8a957299de6f4af1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 5]: /images/20221022/61bbc6ade7564d1999c4320fdbf43ad5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 6]: /images/20221022/192312d399cf4826b806dc85d9a100d7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 7]: /images/20221022/c60d92820590406f9f937d7144a1ce0a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 8]: /images/20221022/661b8122bb134c42b2b10578dfa55806.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 9]: /images/20221022/1628b86f83f24035bec8b870d26f8c36.png