前端 每日一道面试题（6）

hello! 每日一道面试题 大厂offer等着你

今天我们的面试题主要考察的是作用域链

看题 然后说写出打印结果

function Foo() {
 this.m = 10
 this.n = 24
 this.getM = function () {
    console.log(this.m)
  }
}
Foo.prototype.getM = function () {
  console.log(this.m)
}

Foo.prototype.getN = function () {
  console.log(this.n)
}

let foo1 = new Foo
let foo2 = new Foo
console.log(foo1.getM === foo2.getM)  
console.log(foo1.getN === foo2.getN)
console.log(foo1.__proto__.getN === Foo.prototype.getN)  
console.log(foo1.__proto__.getM === foo2.getM) 
console.log(foo1.getM === Foo.prototype.getM) 
console.log(foo1.constructor) 
console.log(Foo.prototype.__proto__.constructor) 
foo1.getM()  
foo1.__proto__.getM() 
foo2.getN()  
Foo.prototype.getN() 

解析如下

function Foo() {
 this.m = 10
 this.n = 24
 this.getM = function () {
    console.log(this.m)
  }
}
Foo.prototype.getM = function () {
  console.log(this.m)
}

Foo.prototype.getN = function () {
  console.log(this.n)
}

let foo1 = new Foo
let foo2 = new Foo
console.log(foo1.getM === foo2.getM)    //false
console.log(foo1.getN === foo2.getN)    //true
console.log(foo1.__proto__.getN === Foo.prototype.getN)   //true
console.log(foo1.__proto__.getM === foo2.getM)        //false
console.log(foo1.getM === Foo.prototype.getM)        //false
console.log(foo1.constructor)               
// ƒ Foo() {
//  this.m = 10
//  this.n = 24
//  this.getM = function () {
//    console.log(this.m)
//  }
//}
console.log(Foo.prototype.__proto__.constructor) //ƒ Object() { [native code] }

foo1.getM()  //10
foo1.__proto__.getM()    //undefined 
foo2.getN()       //20
Foo.prototype.getN()   //undefined

> 1. 首先 第一行 false，因为我们每个new出来的对象 都会新建一个对象，首先从自己的身上找，找到了，因为都是new出来的，所以地址不同 所以不相等 返回false\
> 2. 跟上面一样 先从自己身上找，没找到；顺着构造函数的原型prototype找 ，找到了，因为他们的原型指向同一个 所以 返回true\
> 3. foo1._的_*proto*_指向构造函数的prototype 所以 true\
> 4.foo1._*proto*_.getM指向的是构造函数的getM; foo2.getM指向的是自己的私有属性 所以false\
> 5. foo1.getM指向的是身的getM 而Foo.prototype.getM 指向的是构造函数的getM 所以 返回 false\
> 6. foo1.constructor 实例对象的constructor 指向构造函数 所以打印的及时构造函数本身\
> 7. Foo.prototype.__proto__.constructor, Foo.prototype 指向构造函数的原型对象 Foo.prototype.__proto__指向构造函数的原型对象 的 一个匿名函数的 实例对象 Foo.prototype.__proto__.constructor 指想匿名函数本身\
> 8. foo1.getM() 打印的是自身私有属性的m里面可以找到 所以打印的是10\
> 9. foo1.__proto_ *.getM() 指向的是 Foo实例对象的 也就是*Foo.prototype.getM 而这里面没有m这个属性 顺着原型链prototype往上找也没有 所以打印的是undefined\
> 10.Foo.prototype.getN() 里面也没有n这个属性 顺着原型链prototype往上找也没有 所以是undefined

为了方便大家理解 这里做了一个原型链的流程图

好了，今天的分享到这了

喜欢的记得 点赞！ 收藏~ +关注哟！