this_原型链_继承

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

作用：
改变函数体内 this 的指向

区别：
对于 apply、call ，作用完全一样，只是接受参数的方式不太一样。
apply()接收两个参数，一个是函数运行的作用域(this)，另一个是参数数组。
call()方法第一个参数与apply()方法相同，但传递给函数的参数必须列举出来。

bind()是es5中的方法，与 apply 和 call 相似
MDN的解释是：bind()方法会创建一个新函数，称为绑定函数，当调用这个绑定函数时，绑定函数会以创建它时传入 bind()方法的第一个参数作为 this，传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。

apply、call、bind比较：

如下代码

var obj = {
    x: 81,
};
  
var foo = {
    getX: function() {
        return this.x;
    }
}
  
console.log(foo.getX.bind(obj)());  //81
console.log(foo.getX.call(obj));    //81
console.log(foo.getX.apply(obj));   //81

三个输出的都是81，但是注意看使用 bind() 方法的，后面多了对括号。
也就是说，区别是，当你希望改变上下文环境之后并非立即执行，而是回调执行的时候，使用 bind() 方法。而 apply/call 则会立即执行函数。

总结

• apply 、 call 、bind 三者都是用来改变函数的this对象的指向的；
• apply 、 call 、bind 三者第一个参数都是this要指向的对象，也就是想指定的上下文；
• apply 、 call 、bind 三者都可以利用后续参数传参；
• bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用 。

2： 以下代码输出什么?

var john = { 
  firstName: "John" 
}
function func() { 
  alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()  //输出John: hi!
/*把func函数赋值给john.sayHi，相当于给对象john添加了一个sayHi的
方法，john调用这个方法时，这个方法内部的this指向当前对象也就是john*/

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

func() 
function func() { 
  alert(this)
}
/*输出window，函数直接被调用，此时 this 绑定到全局对象。在浏览器中，window 就是该全局对象*/

4：下面代码输出什么

document.addEventListener('click', function(e){
    console.log(this);             //输出document，在事件处理程序中this代表事件源DOM对象
    setTimeout(function(){
        console.log(this);        //setTimeout、setInterval这两个方法执行的函数this也是全局对象
    }, 200);
}, false);

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

var john = { 
  firstName: "John" 
}

function func() { 
  alert( this.firstName )
}
func.call(john)   //输出John,通过call方法，函数func的this指向对象john

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

var module= {
  bind: function(){
    $btn.on('click', function(){
      console.log(this) //this指什么    这里的this是$btn
      this.showMsg();     //由于这里的this是$btn，所以无法调用module的showMsg方法
    })
  },
  
  showMsg: function(){
    console.log('饥人谷');
  }
}
//修改
var module= {
  bind: function(){
    var _this = this
    $btn.on('click', function(){
      console.log(this)    //这里的this是$btn
      _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();
/*关联
1、Person 是用来初始化新创建对象的构造函数
2、构造函数Person 的new操作创建实例对象p
3、构造函数有一个prototype属性，指向实例对象的原型对象。通过同一个构造函数实例化的多个对象具有相同的原型对象。
4、原型对象有一个constructor属性，指向该原型对象对应的构造函数
   Person.prototype.constructor === Person
   由于实例对象可以继承原型对象的属性，所以实例对象也拥有constructor属性，同样指向原型对象对应的构造函数 
   p.constructor === Person
5、实例对象有一个proto属性，指向该实例对象对应的原型对象
  p.__proto__ === Person.prototype

 涉及到原型链还有以下关系：
 Person.prototype.__proto__ === Object.prototype 
 Object.prototype.__proto__ === null
 Object.prototype.constructor === Object
*/

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

当调用toString()方法时，会先从本对象中找，如果没有则会从__proto__指向的原型上面去找，如果还没找到，则会从原型的原型上面去找，直到找到为止，

原型链：
JavaScript 对象有一个指向一个原型对象的链。当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依此层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。这些原型组成的关系就成为原型链。

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

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

String.prototype.getMostOften = function() {
    var o = {};
    for (var i = 0; i < this.length; i++) {
        var char = o.charAt(i);
        if (o[char]) {
            o[char]++; //次数加1
        } else {
            o[char] = 1; //若第一次出现，次数记为1
        }
    }

    //遍历对象，找到出现次数最多的字符的次数
    var max = 0;
    var newStr;
    for (var key in o) {
        if (max < o[key]) {
            max = o[key]; //max始终储存次数最大的那个
            newStr = key;
        }
    }
    return newStr;
}

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

instanceof 用来检查对象是否是构造函数的实例。
内部逻辑就是判断当前引用类型对象的__proto__与 目标对象的prototype是否为同一个。从而判断是否为当前对象的实例.

---

继承相关问题

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);
/*方法一将printName作为对象的自有方法定义，对象实例化后自身拥有这个方法
方法二将printName放在构造方法的prototype属性中，实例化对象可以通过原型链查找调用这个方法
使用原型的好处可以让所有对象实例共享它所包含的属性和方法。解决了消耗内存问题。
*/

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

Object.create()方法是ECMAScript5中新增的，用来规范化原型式继承的。
接收两个参数，一个是用作新对象原型的对象，和一个为新对象定义额外属性的（可选）对象。
作用是创建一个具有指定原型且可选择性地包含指定属性的对象。

兼容性
<img src="https://img.haomeiwen.com/i1969310/45a14f6c8c13c13f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"/>

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

hasOwnProperty()函数用于指示一个对象自身(不包括原型链)是否具有指定名称的属性。如果有，返回true，否则返回false。
语法：object.hasOwnProperty( propertyName )
所有的对象都"继承"了Object的对象实例，因此所有的实例对象都可以使用该方法。

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

function Person(name, sex){
    this.name = name;
    this.sex = sex;
}
function Male(name, sex, age){
    Person.call(this, name, sex);  //这里的 call 改变了Person中this的作用域，使其指向了Male。从而实现了构造函数继承
    this.age = age;
}

16： 补全代码，实现继承

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

Person.prototype.getName = function(){
    // todo ...
     console.log(this.name);
};    

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

//todo ...
Male.prototype = Object.create(Person.prototype);
Male.prototype.constructor = Male;

Male.prototype.getAge = function(){
    //todo ...
console.log(this.age);
};

var ruoyu = new Male('xuguojun', '男', 25);
ruoyu.getName();