一、this 相关问题

问题1： apply、call 、bind有什么作用，什么区别

• 作用：都是用来改变函数的this对象的指向的。
• 区别
  先看一个例子

例子

本身没什么好说的，显示的肯定是小王，男，今年24。那么如何用xw的say方法来显示xh的数据呢。
对于call可以这样：xw.say.call(xh);
对于apply可以这样：xw.say.apply(xh);
而对于bind来说需要这样：xw.say.bind(xh)();
如果直接写xw.say.bind(xh)是不会有任何结果的，看到区别了吗？call和apply都是对函数的直接调用，而bind方法返回的仍然是一个函数，因此后面还需要()来进行调用才可以。那么call和apply有什么区别呢？我们把例子稍微改写一下。

例子改写

可以看到say方法多了两个参数，我们通过call/apply的参数进行传参。
对于call来说是这样的xw.say.call(xh,"实验小学","六年级");
而对于apply来说是这样的xw.say.apply(xh,["实验小学","六年级"]);
看到区别了吗，call后面的参数与say方法中是一一对应的，而apply的第二个参数是一个数组，数组中的元素是和say方法中一一对应的，这就是两者最大的区别。
那么bind怎么传参呢？它可以像call那样传参。
xw.say.bind(xh,"实验小学","六年级")();
但是由于bind返回的仍然是一个函数，所以我们还可以在调用的时候再进行传参。
xw.say.bind(xh)("实验小学","六年级");

问题2： 以下代码输出什么?

var john = { 
  firstName: "John" 
}
function func() { 
  alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()

输出：John: hi!

问题3： 下面代码输出什么，为什么

func() 
function func() { 
  alert(this)
}

输出：window。
因为未指定this，this值为underfined，浏览器里有一条规则：如果你传的 context 为null 或者 undefined，那么 window 对象就是默认的 context（严格模式下默认 context 是 undefined）。

问题4：下面代码输出什么

document.addEventListener('click', function(e){
    console.log(this);
    setTimeout(function(){
        console.log(this);
    }, 200);
}, false);

点击后，输出：
document
window
因为setTimeout中的this指向全局对象window

问题5：下面代码输出什么，why

var john = { 
  firstName: "John" 
}

function func() { 
  alert( this.firstName )
}
func.call(john)

输出：John。通过call方法调用的函数改变了其this的指向，指向变量john，而变量john的firstName为John"，所以输出John。

问题6： 以下代码有什么问题，如何修改

var module= {
  bind: function(){
    $btn.on('click', function(){
      console.log(this) //this指什么
      this.showMsg();
    })
  },
  
  showMsg: function(){
    console.log('前端');
  }
}

  //例中的this指向$btn，事件中的this指向发生事件的目标事件
  //因此this.showMsg()不存在，会报错
  //修改后
  var module= {
    bind: function(){
      let _this = this    //保存最初的this
      $btn.on('click', function(){
        console.log(_this)
        _this.showMsg();
      })
    },

    showMsg: function(){
      console.log('前端');
    }
  }

二、原型链相关问题

问题7：有如下代码，解释Person、 prototype、proto、p、constructor之间的关联。

function Person(name){
    this.name = name;
}
Person.prototype.sayName = function(){
    console.log('My name is :' + this.name);
}
var p = new Person("前端")
p.sayName();

Person是一个构造函数，p是通过new Person建造的Person的实例。
每一个构造函数都会有一个prototype，是这个函数的原型对象。
prototype中默认都会有一个constructor属性，指向这一个构造函数。
在本例中，Person的prototype有constructor，指向Person，还有一个sayName方法。
p是Person通过new创建的实例，其中有一个proto这么个属性，这个属性指向了构造函数的prototype，本例中指向了Person的prototype。

问题8： 上例中，对对象 p可以这样调用 p.toString()。toString是哪里来的? 画出原型图?并解释什么是原型链。

toString来自object.prototype
每个对象有都有属性prototype
对象都有属性proto , 对象的proto指向创建他的对象的prototype，对象的prototype的proto又指向创建对象的prototype的对象的prototype，循环下去，直到Object对象为止，因为Object.proto = null
而这条链就是原型链

原型图

问题9：对String做扩展，实现如下方式获取字符串中频率最高的字符

var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因为d 出现了5次

//方法一：
String.prototype.getMostOften = function() {
    var Str = [];
    var num = [];
    var include = false;
    for(var i  = 0; i < this.length; i++){
        if(i === 0){
            Str.push(this[i]);  
            num.push(0);    
        }
        for(var key in Str){
            if(Str[key] === this[i]){
                num[key]++;
                include = true;
            }
        }
        if(!include){
            Str.push(this[i]);  
            num.push(1);    
        }
        include = false;
    }
    var index = num.indexOf(Math.max.apply(Math, num));
    return Str[index];
}

var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因为d 出现了5次


//方法二：
String.prototype.getMostOften = function() {
    var Str = {};
    var key ;
    for(var i = 0; i < this.length; i++){
        key = this[i];
        if(!Str[key]){
            Str[key] = 1;
        }
        else{
             Str[key] ++;
        }
    }
    var max = 0;
    var strKey;
    for(var k in Str){
        if(Str[k] > max){
            max = Str[k];
            strKey = k;
        }
    }
    return strKey;return "出现最多的字母:" + num + "\n" +  "出现次数:" + max;
}

var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因为d 出现了5次

问题10： instanceOf有什么作用？内部逻辑是如何实现的？

作用：判断对象在其原型链中是否存在一个构造函数的prototype属性。

function _instanceof(obj,func){
        if(obj.__proto__ === func.prototype){//先判断该对象的直接原型
对象是否等于构造函数的prototype属性，如果是，返回true
            return true
        }else {//如果不是，把obj的原型链上升一层，继续判断它的原型
对象的原型对象是否等于某个构造函数的prototype属性，进行一个递归的判断
            return _instanceof(obj.__proto__,func)
        }
    }

三、继承相关问题

问题11：继承有什么作用?

首先什么是继承：继承是指一个对象可以直接使用另一个对象的属性和方法

继承提高了代码的可重用性，因为子类拥有了父类的属性和方法，修改代码时只需修改父类的属性和方法，那么子类的也会随之修改。
说到继承，不得不提多态，多态是指针对同一个方法，子类之间可以有不同的表现，也就是说子类可以重写或者覆盖父类的方法，但又不影响父类本身，也可以对子类本身原型对象进行一些属性或方法的补充和扩展。

问题12： 下面两种写法有什么区别?

//方法1
function People(name, sex){
    this.name = name;
    this.sex = sex;
    this.printName = function(){
        console.log(this.name);
    }
}
var p1 = new People('王小明', 2)

//方法2
function Person(name, sex){
    this.name = name;
    this.sex = sex;
}

Person.prototype.printName = function(){
    console.log(this.name);
}
var p1 = new Person('前端', 27);

方法2将方法写在原型链上，起到了公共代码的作用，节约了代码量，提高了性能。

问题13： Object.create 有什么作用？兼容性如何？

作用：Object.create(proto[, propertiesObject ])创建一个具有指定原型且可选择性地包含指定属性的对象。。

• proto：必需。 要用作原型的对象。 可以为 null。
• propertiesObject：可选。该参数对象是一组属性与值，该对象的属性名称将是新创建的对象的属性名称，值是属性描述符（这些属性描述符的结构与Object.defineProperties()的第二个参数一样）。注意：该参数对象不能是 undefined，另外只有该对象中自身拥有的可枚举的属性才有效，也就是说该对象的原型链上属性是无效的。

问题14： hasOwnProperty有什么作用？ 如何使用？

• 作用：
  hasOwnProperty是Object.prototype的一个方法，判断一个对象是否包含自定义属性和方法，而不是原型链上的属性和方法。
• 使用：
  m.hasOwnProperty('name');
  m.hasOwnProperty('printName');
  Male.prototype.hasOwnProperty('printAge');

问题15：如下代码中call的作用是什么?

function Person(name, sex){
    this.name = name;
    this.sex = sex;
}
function Male(name, sex, age){
    Person.call(this, name, sex);    //这里的 call 有什么作用
    this.age = age;
}

call调用Person方法，指定Person方法中的this为Male，并传入参数sex，age

问题16： 补全代码，实现继承

function Person(name, sex){
    // todo ...
}

Person.prototype.getName = function(){
    // todo ...
};    

function Male(name, sex, age){
   //todo ...
}

//todo ...
Male.prototype.getAge = function(){
    //todo ...
};

var ruoyu = new Male('前端', '男', 27);
ruoyu.printName();

function Person(name, sex){
    this.name = name
    this.sex = sex
}

Person.prototype.getName = function(){
    console.log( '姓名: ' + this.name)
};    

function Male(name, sex, age){
   Person.call(this, name, sex);
   this.age = age;
}

Male.prototype = Object.create(Person.prototype);

Male.prototype.getAge = function(){
    console.log('岁数: ' + this.age);
};

var ruoyu = new Male('前端', '男', 27);
ruoyu.getName();
ruoyu.getAge();