this 相关问题

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

在 javascript 中，call 和 apply 都是为了改变某个函数运行时的上下文（context）而存在的，换句话说，就是为了改变函数体内部 this 的指向。

• apply和call

对于 apply、call 二者而言，作用完全一样，只是接受参数的方式不太一样。

• bind

MDN的解释是：bind()方法会创建一个新函数，称为绑定函数，当调用这个绑定函数时，绑定函数会以创建它时传入 bind()方法的第一个参数作为 this，传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。
虽然bind也可以改变函数的this，但是它本身是创建一个新函数。
总结一下：

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

（ps：此答案参考gj_kester的博客《深入浅出妙用 Javascript 中 apply、call、bind》）

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

var john = { 
  firstName: "John" 
}
function func() { 
  alert(this.firstName + ": hi!")
}
john.sayHi = func;
john.sayHi();//弹窗“John: hi!”

将对象John的sayHi属性设置为函数func相当于

    var john = { 
        firstName: "John" ；
        sayHi：func
    }

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

func() ;//弹窗输出window
function func() { 
  alert(this)
}

在函数被直接调用时this绑定到全局对象。在浏览器中，window 就是该全局对象

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

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

输出document和window
在事件处理程序中this代表事件源DOM对象（低版本IE有bug，指向了window）
setTimeout、setInterval这两个方法执行的函数this是全局对象

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

var john = { 
  firstName: "John" 
}

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

call() 方法在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法.就是改变了函数的this值

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

var module= {
  bind: function(){
     var _this = this;//保存变量this
    $btn.on('click', function(){
      console.log(_this) 
      _this.showMsg();
    })
  },

  showMsg: function(){
    console.log('饥人谷');
  }
}

因为在事件处理程序中this代表事件源DOM对象，所以click事件中，this指的是$btn，可以采取保存变量this的方法避免冲突。

原型链相关问题

问题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();

p为Person的实例，拥有Person原型链上的属性和方法
p.proto指向Person.prototype
Person.prototype.constructor指向Person

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

图片出饥人谷

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

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;
}

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

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

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

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属性是每个实例对象的私有属性，就是说每个实例对象都有一个printName属性，并且互不干扰（一个实例对象的printName属性修改不会影响到其他的实例对象 ）；方法二中的printName属性是属于原型的属性，相当于是所有通过 Person创建的实例对象共有的属性，一旦原型的printName属性修改，所有通过 Person创建的实例对象的printName属性全部修改。

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

作用：
Object.create(proto[, propertiesObject ])
创建一个拥有指定原型和若干个指定属性的对象

proto：一个对象，作为新创建对象的原型。或者为null。

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

• ES5 方法 IE9以下不支持

问题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){
    this.name = name;
    this.sex = sex;
}

Person.prototype.getName = function(){
    console.log(this , 'name: ' + 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(){
        console.log(this , 'age: ' + this.age);
    };

var ruoyu = new Male('若愚', '男', 27);
ruoyu.getName();
ruoyu.getAge();