自从四月份换工作后,一方面要适应新的环境,另一方面也是自己的惰性作怪,已经好长时间没写博客了,整个人都松懈了下来;刚好最近工作不忙,新环境也适应好了,感觉还是得给自己充充电,趁着业余时间多学点东西,顺便也总结下工作中的一些经验,那就从这篇博客开始吧!
众所周知,原型与原型链是js中重要的一个知识点,掌握它对于我们来说是必要且必须的,以下是关于原型链的一些基础知识点:
- js是弱类型语言,js中的对象属性是可以自由添加、随意扩展的;(用起来很爽)
- 每个js对象都有一个proto(隐式原型)属性,指向一个对象;
- 每个构造函数都有一个prototype(显式原型)属性,指向它的原型;
- 对象的proto属性与它的构造函数的prototype属性指向的是同一个对象;
- js中查找对象属性时,首先从属性自身查找,未找到,则沿着它的proto属性向上查找即在它的构造函数的原型上查找,一直到Object.prototype为止,这是一条原型链;
- 将一个构造函数的原型指向一个实例,这个实例有自己的proto属性,指向它的构造函数的原型,再将这个原型指向另一个实例,如此重复,形成一条属性链,实现属性自由扩展;
接下来 就是一个比较实用的关于原型链继承的简单实例,类似jquery里的元素Dom操作:
function Elem(id) {
this.elem = document.getElementById(id);
}
Elem.prototype.html = function (val) {
let elem = this.elem;
if(val){
elem.innerHTML = val;
return this ;//作链式操作
}else{
return elem.innerHTML;
}
};
Elem.prototype.on = function (type,fn) {
let elem = this.elem;
elem.addEventListener(type,fn);
return this;
};
//使用
let div1 = new Elem('wrap');
div1.html();
div1.html('<p>this is from prototype</p>').on('click',function () {
alert('clicked')
}).html('<p>second time change</p>');
上面的函数,实现的一个根据id查找元素,获取元素内容以及给元素绑定事件的功能,其实现原理就是在构造行数的原型上添加方法,非常简单明了;原型的使用在工作中非常常见也非常方便,比如在Vue项目中,我们经常在全局vue实例的原型上添加一些属性和方法,来实现全局的属性共享;
以上内容,仅仅是一个小知识点的总结,来源主要是来自某课网的一个视频—《前端JavaScript面试技巧》,这个视频里关于js面试的一些常见问题和js基础知识点讲的还是很不错的(个人观点);作者关于原型和闭包的系列博客也写得很不错,传送门在这里:点击跳转