this

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

• apply、call 、bind 都是用来改变函数的 this 对象的指向的。
• apply、call 作用一样，但接受参数的方式不一样，call 和 apply 的第一个参数都是函数体内部 this 的指向，call 从第二个参数开始以参数列表的形式展现，而 apply 则是把除了函数体内部 this 的指向参数之外的其它参数放在一个数组里面作为它的第二个参数。

fn.call(this, arg1, arg2, arg3...);
fn.apply(this, [arg1, arg2, aeg3...]);

• call 和 apply 改变了函数的 this 指向后便执行该函数，而 bind 则是返回一个改变了 this 指向的新函数，若函数需立即执行需加立即执行新函数，bind 的用法为：

fn.bind(this, arg1, arg2, arg3...)();

2. 以下代码输出什么?

var john = { 
  firstName: "John" 
}
function func() { 
  alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()  //John: hi!
//func 函数赋值给 john 对象 的 sayHi 方法后并调用，this 指向 john 对象。

3. 下面代码输出什么，为什么？

func() 
function func() { 
  alert(this)
}
// window，因为 func() 等价于 func.call(null)，
当第一个参数为 null 或者 undefined 时，this 默认指向 window

4. 下面代码输出什么

document.addEventListener('click', function(e){
    console.log(this);
    setTimeout(function(){
        console.log(this);
    }, 200);
}, false);
//document，点击事件回调方法执行时，this指向 document
//window，定时器回调函数执行时，this指向 window

5. 下面代码输出什么，为什么？

var john = { 
  firstName: "John" 
}

function func() { 
  alert( this.firstName )
}
func.call(john)
//john，func.call(john) 将 func 里的 this 指向了 john

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

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

$btn 里面没有 showMsg() 方法，可使用中间变量保存this对象，更改为：

var module= {
  bind: function(){
    var _this = this; //this 指 module
    $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();

原型链.png

Person 是一个构造函数，有 prototype 属性，指向 Person 的原型，该原型拥有 constructor 属性，其中Person.prototype.constructor === Person
p 是 Person 构造出的一个实例，拥有__proto__属性，p.__proto__ 指向Person.prototype

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

完整原型链.png

• toString() 方法来自于 Object.prototype。任何类的 prototype 属性本质上都是个类 Object 的实例,所以 prototype 也和其它实例一样也有个 __proto__ 内部属性，指向其类型 Object 的 prototype.
• 原型链：每个对象都有一个指向它的原型（prototype）对象的内部链接。这个原型对象又有自己的原型，直到某个对象的原型为 null 为止（也就是不再有原型指向），组成这条链的最后一环。这种一级一级的链结构就称为原型链（prototype chain）。

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

String.prototype.getMostOften = function () {
    var obj = {};
    for(var i = 0; i < this.length; i++){
        var item = this[i];
        if(obj[item]){
            obj[item]++;
        } else {
            obj[item] = 1;
        }
    }
    var num = 0;
    var max =null;
    for(item in obj){
        if(obj[item] > num){
            num = obj[item];
            max = item;
        }
    }
    return max;
};
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因为d 出现了5次

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

instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性，返回一个布尔值。

var fn = function () {
  console.log('hello');
}
fn instanceof Function;  //true, fn.__proto__=== Function.prototype
fn instanceof Object;    //true, fn.__proto__.__proto__ === Object.prototype
fn instanceof Array;     //false

继承

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()，而且此方法在实例内部。
• 方法二中的 printName() 是存在于原型链中的，方法二只要创建一次，所有实例共享 printName() 方法，相较于方法一可以节省内存。

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

• Object.create() 方法会使用指定的原型对象及其属性去创建一个新的对象。

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

• 兼容性

Object.create()兼容性.png

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

• hasOwnProperty() 方法可以用来检测一个对象是否含有特定的自身属性，和 in(如果指定的属性存在于指定的对象中，则 in 运算符会返回 true)运算符不同，该方法会忽略掉那些从原型链上继承到的属性。
• 用法为 obj.hasOwnProperty(prop)，hasOwnProperty() 方法会返回一个布尔值。

function Person(name) {
  this.name = name;
}
Person.prototype.sayName = function() {
  console.log(this.name);
}
var p = new Person('xiaoming');
p.hasOwnProperty('name');      //true，存在于实例中
p.hasOwnProperty('sayName');   //false，存在于原型对象中

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;
}
//将构造函数 Person 内部 this 对象的指向更改为 Male 的实例对象，
并且将 Male 的 name 和 sex 作为参数传给 Person，实现了继承。

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(){
    return ('My name is ' + this.name);
};

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

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


Male.prototype.getAge = function(){
    return ('My age is ' + this.age);
};

var ruoyu = new Male('若愚', '男', 27);
ruoyu.getName();  //My name is 若愚