this_原型链_继承

this 相关

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

• apply、call、bind可以改变this所指向的对象。

• call、apply，调用一个函数，第一个参数都是希望设置的this对象，不同之处在于call方法后面的参数为指定的参数列表，而apply后面的参数为指定的参数数组

  fn.call(context, param1, param2...)
  fn.apply(context, [param1,param2...])
  

• bind，返回一个新函数，并且使函数内部的this为传入的第一个参数

2. 以下代码输出什么?

var john = { 
  firstName: "John" 
}
function func() { 
  alert(this.firstName + ": hi!")
}
john.sayHi = func; //将func函数绑定到john对象的sayHi属性上，就可以调用sayHi方法
john.sayHi(); //John: hi!  调用john的sayHi方法，this就是john

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

func() 
function func() { 
  alert(this) //输出[object Window]，func是在全局作用域下定义，所以func是window的一个对象，所以this指向全局对象window
}
也可以理解为：
func()等价于func.call(undefined);
而undefined会被浏览器默认为全局对象window;

4. 下面代码输出什么

document.addEventListener('click', function(e){
    console.log(this); //输出 #document，在事件处理程序中this指的是触发此事件的DOM对象
    setTimeout(function(){
        console.log(this); //输出window，setTimeout这个方法执行的函数this是全局对象
    }, 200);
}, false);

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

var john = { 
  firstName: "John" 
}

function func() { 
  alert( this.firstName ) //输出John，this指向john
}
func.call(john) //call方法中第一个参数可以使func里的this指向传入的参数john

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

var module= {
  bind: function(){
    $btn.on('click', function(){ //$btn未定义
      console.log(this) //this指指的是触发此事件的DOM对象$btn
      this.showMsg(); 
    })
  },
  
  showMsg: function(){
    console.log('饥人谷');
  }
} //会报错

修改后：

var $btn = $('button');
var module = {
  bind: function(){
      var _this = this; //先将this赋给变量——this保存起来，在调用函数bind时，这里的this就是对象module。
    $btn.on('click', function(){
      console.log(_this) 
      _this.showMsg(); //_this指向module，输出：饥人谷。
    })
  },
  showMsg: function(){
    console.log('饥人谷');
  }
}
module.bind(); //执行bind()方法

原型链相关问题

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是一个构造函数，本身也是一个对象。
• prototype是Person对象里面的一个属性，同时prototype是构造函数内部的原型对象，其拥有contructor和__proto__属性，其中contructor属性指向构造函数Person，__proto__指向该对象的原型。
• p是构造函数Person构造出来的示例，也拥有__proto__属性，p.__proto__ === Person.prototype

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

toString方法是继承原型对象里的toString方法。p自身并没有toString方法，所以会沿原型链向上查找，沿着p的__proto__属性到构造函数Person的prototype里找toString方法，如果还没有，就沿着Person.prototype的__proto__里找toString方法，Person.prototype的__proto__就是Object.prototype，所以就会找到toString方法。
原型链：由于原型对象本身也是对象，而每个对象都有一个原型对象，每个对象都有一个隐藏的__proto__属性，原型对象也有自己的原型，而它自己的原型对象又可以有自己的原型，这样就组成了一条链，这个就是原型链。在访问对象的属性时，如果在对象本身中没有找到，则会去原型链中查找，如果找到，直接返回值，如果整个链都遍历且没有找到属性，则返回undefined。

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

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

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

instanceOf用于判断一个对象是否为另一个对象的实例。

function isInstanceOf(obj, fn){
    var oldpro = obj.__proto__;
    do{
        if(oldpro === fn.prototype){
            return true;
        }
        else {
            oldpro = oldpro.__proto__;
        }
    }while(oldpro)
    return 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方法，会占用多余的内存空间。
方法二创建的实例对象，pringtName方法在Person的prototype上（相当于一个公共空间），每个实例对象可以沿原型链调用该方法，而不必创建一个相同的方法，节约了内存空间。

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

作用：创建一个拥有指定原型和若干个指定属性的对象。

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

作用：判断一个对象是否包含自定义属性而不是原型链上的属性，hasOwnProperty是JavaScript中唯一一个处理属性但是不查找原型链的函数。

以12.中的方法二为例：

p1.hasOwnProperty('name'); //true
p1.hasOwnProperty('sex'); //true
p1.hasOwnProperty('printName'); //false, printName方法在原型链上

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，并传入Male的参数，使Male构造的对象继承Person的name, sex属性，并独立建立age属性，又不影响Person的原属性。

16. 补全代码，实现继承

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对象的原型为Person的原型
Male.prototype.getAge = function(){
    console.log(this.age);
}
Male.prototype.printName = function(){
  console.log(this.name);
}

var ruoyu = new Male('若愚', '男', 27);
ruoyu.printName(); //若愚