一个贴近实际的原型链继承的列子

发表于 | 分类于

    自从四月份换工作后，一方面要适应新的环境，另一方面也是自己的惰性作怪，已经好长时间没写博客了，整个人都松懈了下来；刚好最近工作不忙，新环境也适应好了，感觉还是得给自己充充电，趁着业余时间多学点东西，顺便也总结下工作中的一些经验，那就从这篇博客开始吧！
    众所周知，原型与原型链是js中重要的一个知识点，掌握它对于我们来说是必要且必须的，以下是关于原型链的一些基础知识点：

  1. js是弱类型语言，js中的对象属性是可以自由添加、随意扩展的；(用起来很爽)
  2. 每个js对象都有一个proto（隐式原型）属性，指向一个对象；
  3. 每个构造函数都有一个prototype（显式原型）属性，指向它的原型；
  4. 对象的proto属性与它的构造函数的prototype属性指向的是同一个对象；
  5. js中查找对象属性时，首先从属性自身查找，未找到，则沿着它的proto属性向上查找即在它的构造函数的原型上查找，一直到Object.prototype为止，这是一条原型链；
  6. 将一个构造函数的原型指向一个实例，这个实例有自己的proto属性，指向它的构造函数的原型，再将这个原型指向另一个实例，如此重复，形成一条属性链，实现属性自由扩展；

      接下来 就是一个比较实用的关于原型链继承的简单实例，类似jquery里的元素Dom操作：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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基础知识点讲的还是很不错的（个人观点）；作者关于原型和闭包的系列博客也写得很不错，传送门在这里：点击跳转