cvte前端笔试后的js原型总结

　　最近实习生招聘已经开始了，昨天晚上也终于迎来了第一场笔试，笔试的公司是cvte，笔试题总共27题，25道不定项还有2道编程题，虽然出的都是前端题，但是因为之前没有好好准备，还是很多做的不是很好o(╥﹏╥)o考完试后也总结了一下，考的以node，原型，promise比较多，之前以为自己原型掌握的还可以，一考才发现问题啊，赶紧总结一下o(∩_∩)o

 

一、从笔试说起

　　大家觉得自己原型掌握的怎么样呢？昨天的笔试出了不少原型的题，一个prototype还好，多个加在一起真的是有点晕了，下面是记得的一道题，大家觉得会输出什么呢？

function f1(){}

typeof f1.prototype;
typeof object.prototype;
typeof function.prototype.prototype;
typeof f1.prototype.constructor

　　上面的代码会依次输出"object"，"object"，"undefined"，"function"，如果大家四个都答对的话就不用往下看啦，如果还不会的话就跟着我一起重新学习下原型把

 

二、原型

1、原型对象

　　无论什么时候，只要创建了一个新函数，就会根据一组特定的规则为该函数创建一个prototype属性，这个函数指向函数的原型对象，这个原型对象中包含了所有实例共享的属性和方法，在默认情况下，所有原型对象都会自动获得一个constructor属性，这个属性包含一个指向prototype属性所在函数的指针，我们拿上面的笔试题为例画图给大家说明一下

　　从上面的图我们可以看出，第一个例子中，因为f1是个函数，因此会根据一组规则为f1创建一个prototype属性，并且指向f1的原型，这里也就是f1.prototype

　　因此，f1.prototype就是我们所说的原型对象啦，既然它是对象，那么typeof f1.prototype就会输出object，而第四个例子中，f1.prototype.constructor会指向f1，f1本身是个函数，所以typeof f1.prorotype.constructor会输出function

　　关于第二个例子object.prototype也是同样的道理，以下面的图为例说明一下：

　　从上面的图我们可以看出，我们可以把object看出是一个构造函数，因此它也有一个prototype属性指向object的原型对象，而object.prototype也是一个对象，因此typeof object.prototype会输出object

　　关于第三个例子就有点复杂啦，首先，typeof function.prototype会输出什么呢？

　　打开控制台，输入代码，我们会看到typeof function.prototype输出的会是function，这里要说明一点，function.prototype和其它类型的prototype属性不一样，像前两个例子一样，f1.prototype和object.prototype以及其它类型的prototype都是object，而function比较特殊，function.prototype的类型是function

　　接下来，typeof function.prototype.prototype为什么会输出undefined呢？这里其实可以这样去理解，这是因为function.prototype不具备prototype属性，因此会输出undefined，一般来说，只有函数才会根据一定的规则创建prototype的，而function.prototype并不是函数，因此也不具备prototype属性，同样的道理，typeof f1.prototype.prototype会输出undefined，typeof object.prototype.prototype也会输出undefined

 

2、实例，原型和构造函数的关系

　　首先，我们需要先来说一下__proto__这个属性，当一个对象被实例化的时候，将会包含一个内部属性，我们把这个内部属性叫做[[prototype]]，也就是__proto__，这个属性会指向实例化出这个对象函数的prototype，比如有下面的代码

function person(){}

var person1 = new person();

　　这个时候person的构造函数，person的原型属性和person的实例之间的关系可以这样表示

　　从上面的图我们可以看到，person是构造函数，它将根据一组特定的规则创建prototype属性，并且指向person的原型对象，而person.prototype的constructor会指向person构造函数，而person1是person的实例，会包含一个内部属性__proto__指向person.prototype，大家别小看__proto__，正因为有了这个属性，我们就可以在person.prototype上添加属性和方法，这些属性和方法将会被所有实例所共享，比如说可以像下面这样在person的原型上添加属性和方法

function person() {}

person.prorotype.sayname = function() {
    console.log(this.name);                    //  在原型上添加方法
}

var person1 = new person();
var person2 = new person();

person1.name = "nicholas";                  //  在实例上添加属性
person2.name = "greg";                       //  在实例上添加属性

person1.sayname();                             //  nicholas
person2.sayname();                             //  greg

　　一般来说，每当代码读取某个对象的某个属性时，都会指向一次搜索，目标是具有给定名字的属性，搜索首先从对象实例本身开始，如果在实例中找到了具有给定名字的属性，则返回该属性的值，如果没有找到，则继续搜索指针指向的原型对象，在原型对象中查找具有给定名字的属性

　　我们在person的原型上添加了sayname方法，并且创建了person1和person2两个实例，这两个实例都有自己的name属性，当执行sayname()方法时，由于其实例上不存在sayname()方法，因此会顺着__proto__指向的原型，在原型上查找sayname()方法，并且指向里面的代码

 

3、怎么判断某个实例和原型之间存在关系

　　在所有实现中都无法访问到[[prototype]]的，因此我们不可能通过实例的[[prototype]]判断其是否和某个原型存在关系，我们需要使用isprototypeof()方法来确定对象之间是否存在这种关系，从本质上讲，如果[[prototype]]指向调用isprototypeof()方法的对象，那么就返回true

 

person.prorotype.isprototypeof(person1);        //  true
person.prototype.isprototypeof(person2);        //  true

 

　　因为person1和person2内部的[[prototype]]都指向person.prototype，所以返回true

 

4、怎么判断属性存在实例还是原型中

　　前面已经说过，如果在对象的实例上搜索不到某个属性时，将会在原型对象上进行搜索，如果我们在实例中添加了一个属性，而该属性与实例原型中的一个属性同名，那么该属性将会屏蔽原型中的那个属性，那么，我们怎么判断一个属性是存在实例还是存在原型中呢，这里可以用hasownproperty进行判断

　　使用hasownprototype方法可以检测一个属性是否是存在于实例中，还是存在于原型中，旨在给定属性存在于对象实例中时，才会返回true

 

5、再来一个题

　　上面对原型做了一个比较简单的介绍，不知道大家是不是对原型有个了解了，最后，我们在来看下面的题输出的是什么？

　　大家知道typeof function.prototype.__proto__又是什么呢？大家自己输出代码试一试，结果会输出object哟，我们看看下面的代码

function.prototype.__proto__ === object.prototype;    // true

　　一般来说，除了object.prototype之外的所有对象都会有[[prototype]]，也就是__proto__属性，会指向实例化出这个对象的构造函数的原型，而为什么object没有呢，因为js的继承机制主要是原型链实现的，而原型链的头就是object.prototype，而这里function.prototype其实就是指向了object.prototype

 

　　今天主要介绍这么多了，接下来要好好准备笔试，准备面试了，其实在笔试和面试中，我们可以发现自己在哪方面的不足，及时的进行总结，其实面试对于我们来说，也是一种不断学习的过程，希望大家都能加油拿到自己想要的offer