this 相关问题

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

1. apply
   语法格式：function.apply(this, [arguments])
   参数this是在函数function运行时指定的this值，在调用function时可以为它指定一个this对象，this指的就是调用function的对象(函数执行时所在的上下文)，然后在这个上下文中调用该函数，作用就是以对象的方法的形式来调用函数，如：

f.apply(o);
类似于
o.method=f; //f函数类似于o对象的临时方法
o.method();//调用它

apply方法的作用和call方法类似，只有一个区别，call方法传入的是参数列表，而apply方法传入的是一个包含多个参数的数组。
如：

f.apply(o,[1,2]);
f.call(o,1,2);

bind的作用:
bind方法主要是将函数绑定到某个对象上，当在函数f()上调用bind方法并传入一个对象o作为参数，这个方法将返回一个新的函数。调用新函数时，会把原始函数当做对象o的方法调用，传入新函数的实参都会传到原始函数，

function f(y){
   return this.x+y;
}
var o={
   x:1
}
var g=f.bind(o);//通过g(x)来调用o.f(x);
g(2)  //3

bind方法将f函数内部的this绑定到o对象上，当调用f函数时，f函数会以创建它时传入 bind()方法的第一个参数作为 this，传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。
三者比较：
apply 、 call 、bind 三者都是用来改变函数的this对象的指向的；
apply 、 call 、bind 三者第一个参数都是this要指向的对象，也就是想指定的执行上下文；
apply 、 call 、bind 三者都可以在this后传参数；
bind 是返回新的函数，可以之后调用；apply 、call 则是立即调用 。

以下代码输出什么?

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

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

func() 
function func() { 
  alert(this)
}
//window,因为this指向的函数运行时的环境，现在func的执行上下文是window,所以输出window.

下面代码输出什么

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

1.#document，因为click方法是在document的环境中被调用的，所以this指向document。
2.window对象，setTimeout函数是在click事件结束之后才执行的，所以它的执行环境是window，this指向的是window

下面代码输出什么，why

var john = { 
  firstName: "John" 
}

function func() { 
  alert( this.firstName )
}
func.call(john) //John，因为call的第一个参数传入的时调用func的上下文，所以func函数在john的执行上下文中，this指的john.

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

var module= {
  bind: function(){
    $btn.on('click', function(){
      console.log(this) //this指什么
      this.showMsg();
    })
  },
  
  showMsg: function(){
    console.log('饥人谷');
  }
}
改：
  var module= {
        bind: function(){
            var self=this;
            $('.btn').on('click', function(){
                console.log(this) //this指什么,指的是btn,
                self.showMsg(); //
            })
        },
        showMsg: function(){
            console.log('饥人谷');
        }
    }
    module.bind();//饥人谷
  在click事件中的this指的都是$btn.而在这个事件的执行上下文中没有
showMsg()函数，所以调用的时候会提示showMsg()is not a function。
showMsg()在bind的作用域里，所以把指向bind的this保存到self中，在click事件中使用就不会报错了。

原型链相关问题

有如下代码，解释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是一个构造函数，也是一个对象，函数内部定义了name属性，和自身带有的prototype属性，所有实例Person的实例都会生成这些属性。
  p是构造函数Person的一个实例，所以p具有name的属性。因为每个构造函数的实例都会有一个隐藏的属性proto，指向构造函数的prototype属性，所以p里的proto指向Person中的prototype。
  Person.prototype是Person的原型对象，里面定义了一个sayName，所以Person的实例都可以调用该方法。prototype对象有一个constructor属性，默认指向prototype对象所在的构造函数，所以图中的constructor就指向构造函数Person.因为原型对象也是对象，所以Person.prototype中的proto就指向Person.prototype的原型。

Paste_Image.png

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

对象p的proto指向的是构造函数Person的原型对象，Person的原型对象也是个对象，也有自己的原型对象，这个原型对象就指Object.prototype，Object.prototype就有toString()这个方法。当一个对象调用一个方法时，会先在内部属性找，如果找不到，就到它的原型去找，如果还是找不到，就到原型的原型去找。如果直到最顶层的Object.prototype还是找不到，则返回undefined。

原型链：

对象的属性和方法，有可能是定义在自身，也有可能是定义在它的原型对象。由于原型本身也是对象，又有自己的原型，所以形成了一条原型链。

未命名文件.png

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

  String.prototype.getMostOften=function(){
            var obj={};
         for(var i=0;i<this.length;i++){
              if(obj[this[i]]){
                  obj[this[i]]++;
              }else{
                  obj[this[i]]=1;
              }
         }
         var index;
          var max=0;
        for(var key in obj){
            if(obj[key]>max){
                max=obj[key];
                index=key;
            }
        }
        return "出现最多的字是"+index+"次数是"+max;
    }
    var str = 'ahbbccdeddddfgg';
    var ch = str.getMostOften();
    console.log(ch);//出现最多的字是d次数是5

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

instanceof运算符返回一个布尔值，判断对象是否是某个构造函数的实例。
instanceof运算符的左边是实例对象，右边是构造函数。它会检查右边构建函数的原型对象，是否在左边对象的原型链上:

obj instanceof cls
function _instanceof(obj, cls) { 

var p = obj.__proto__, cp = cls.prototype; 
while(p) { 
if(p === cp) return true; 
p = p.__proto__; 
} 
return false; 
} 

继承相关问题

继承有什么作用?

1.实现代码复用，减少内存消耗。
2.可以覆盖父类的属性，可以实现代码的扩展。

下面两种写法有什么区别?

//方法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是函数自身的属性，每new一个Person的实例就会开辟一块内存存储printName函数，内存消耗较大。
第二种方法把printName作为Person.prototype属性，Person的所有实例的proto都指向同一个原型对象，所有实例都共用这个方法，可以节约内存。

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

Object.create()方法用于创建一个新的对象，其中传入的参数是该对象的原型，
如：

var obj1={
   x:1
}
var obj2=Object.create(obj1)//所以obj2就继承了obj1的属性x了

兼容性：

Paste_Image.png

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

对象hasOwnProperty()方法用于检测给定的名字是否是对象自有的属性，对于继承的属性它将返回false.
使用方法：

var o={
 x:1
}
o.hasOwnProperty(“x”)  //true，因为o对象有一个自有属性x
o.hasOwnProperty(“y”)  //false，因为o对象没有自有属性y
o.hasOwnProperty(“toString”)  //false,因为toString是继承属性。

如下代码中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方法，可以指定函数内部this的指向,并在所指定的作用域中，调用该函数。Person.call(this,name,age) 的 意思就是使用 Person构造函数的实例在this对象(也就是当前的执行上下文，Male的作用域)下执行，那么 Male就有了Person的所有属性和方法，实现了继承。

补全代码，实现继承

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

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

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

    Male.prototype.getAge = function(){
          console.log(this.age);
    };
    Male.prototype=Object.create(Person.prototype);
    var ruoyu = new Male('若愚', '男', 27);
    ruoyu.getName();