快速写一个让自己及面试官满意的原型链

Gaby
1,191 阅读3分钟

这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战

原型的五条原则

对于这个铁定的规则，需要牢记，需要牢记，切记，一定要牢记，重要的事情不是说三遍，而是要熟烂于心

  • 所有引用类型（函数、对象、数组），都存在对象特性，即可以自由拓展属性。 （除了null意外）
  • 所有的引用类型（函数、对象、数组），都有一个_proto_ (我们这里称他为隐形原型)属性，属性值是一个普通的对象。
  • 所有函数都有一个prototype属性，属性值也是一个普通的函数
  • 所有的引用类型（函数、对象、数组），*proto* 属性值指向它的构造函数的 prototype(显性属性)属性值。
  • 当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的_proto_ （即他的构造函数的prototype）中寻找。如果没有，则会接着往上找，一直上溯到Object.prototype，也就是说所有对象都继承Object.prototype的属性，Object.prototype的原型是null，null没有任何属性和方法。

总结了以上几条规则后，我感悟最深的就是原来JS万物皆为NULL,真的是太深奥了。

prototype属性的作用

我们通过构造函数实例一个函数后，它内部的属性和方法只能够它自己用，其他实例无法共享到。为甚呢？

例子

function Animal(type,name) {
    this.name = name;
    this.type = type;
    this.tell = function() {
        console.log('hello')
    }
}
var dog = new Animal('dog','lunky');
var cat = new Animal('cat','miao');
dog.tell === cat.tell//false

那么该怎么共享这个tell呢。这时候原型对象就发挥它的作用了，如果我们在原型定义属性和方法，那么这个函数所有的实例就能够共享到在原型上定义的方法或属性。
例子说明

function Animal(type,name) {
    this.name = name;
    this.type = type;
}
var dog = new Animal('dog','lunky');
var cat = new Animal('cat','miao');
Animal.prototype.color = 'red';
dog.color === cat.color //true
其次需要了解下constructor属性

prototype对象有一个constructor属性，默认指向prototype对象所在的构造函数

来一个例子

function Example(name){
    this.name = name
}
Example.prototype.constructor === Example //true

有什么作用呢

常用的作用就是constructor可以得知某个实例的对象，是由哪一个构造函数产生的。例如：

function Example(name){
    this.name = name
}
var e = new Example('ha')
e.constructor === Example// true
e.constructor === Date// false

上面实例中我们就可以看出，e的构造函数是Example，而不是Date.

一个贴近工作的例子

平时我们工作中用到原型的地方，主要是全局注册一些第三方插件的时候，比如我们平时用vue写了一个插件，实例化后然后通过Vue.prototype定义到原型链上后，再用Vue.use方法。那么我们就可以全局调用这个方法了。那么面向面试官的时候，怎么在几分钟内写一个比较好的例子呢。

//一段HTML走起 
 <div id='example'></div>

//JS
function ElemDom(id) {
    this.elemDom = document.getElementById(id)
};
//定义一个写入内容的方法
ElemDom.prototype.html = function(val){
    var tempElemDom = this.elemDom;
    if(val){
        tempElemDom.innerHTML = val;
        return this;//这里为什么要return this
    }else {
        return tempElemDom.innerHTML
    }
}
//定义一个事件
ElemDom.prototype.on = function(type,fn){
    var tempElemDom = this.elemDom;
    tempElemDom.addEventListener(type,fn);
    return this;
}

var divDom = new ElemDom('example');
divDom.html('<p>hello world</p>').on('click',function(){
  console.log('i am coming')
}).html('<h1>footer</h1>')

代码中return this 是为了使用方法时能够链式调用,是不是看到了JQ写法的感觉。上面的例子看似简单，但是面试过程中能够手动写出来，然后在逐步讲解对原型链的了解，那么对于面试官来说还是能够有较好的印象的。希望这篇简短的文章能够帮助到你。

如果这篇文章帮到了你，记得点赞👍收藏加关注哦😊，希望点赞多多多多...

文中如有错误，欢迎在评论区指正

avatar
文章
阅读
粉丝