this 相关问题

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

bind:创建一个新函数，当这个函数被调用的时候，第一个参数作为this值，之后的参数作为实参传入到新函数中。

call:调用函数，并指定这个函数的this和传入的若干个参数值。

apply:指定this值和以数组形式传递参数的情况下调用函数。

作用: 从它们的用法中可以看出，改变this，传递参数。

区别:首先是call和bind的区别，call是调用函数，返回的是函数的返回值，而bind是创建一个新函数，就像是复制了别人的躯壳，改变了内在，然后作为一个新东西使用。然后call和apply的区别是，传递的实参不一样，call是单个传递，而apply是以数组的形式传递。

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

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

`john.sayHi = func`为john对象添加了一个新方法`sayHi :function(){  alert(this.firstName + ": hi!") }`
john = {
             firstName: "John" 
            sayHi :function(){  alert(this.firstName + ": hi!") }
        }
`john.sayHi()`输出：弹出一个对话框，内容为John:hi!
       

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

func() 
function func() { 
  alert(this)
}

输出[object Window]
因为：函数func所在的作用域为全局作用域，因此函数中的this指向window

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

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

输出：#document
Window

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

var john = { 
  firstName: "John" 
}

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

输出：John，因为调用func.call(john)时，函数func中的this发生了改变，指向了对象john，因此输出this.firstName时，指的是对象john中的firstName

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

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

在调用this.showMsg()时，this指的是$btn，而$btn中没有showMsg方法，在调用module.bind()时，点击$btn会报错this.showMsg is not a function，
应该修改为：

var module= {
  bind: function(){
    var _this = this;//声明一个变量，将this保存在变量中
    $btn.on('click', function(){
      console.log(this) //this指的是$btn
      _this.showMsg();//_this指向对象module
    })
  },
  
  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();

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

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

toString是从Object.prototype中找到的。当调用p.toString()时，p会检查自身是否有这个函数，如果有则直接调用，如果没有，则从p.proto中查找，如果还没有找到，则从原型对象.proto中寻找。

原型链1.png

原型链：
其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。简单回顾一下构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型对象都有一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。那么，假如我们让原型对象等于另一个类型的实例，结果会怎么样呢？显然，此时的原型对象将包含一个指向另一个原型的指针，相应地，另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例，那么上述关系依然成立，如此层层递进，就构成了实例与原型的链条。这就是所谓原型链的基本概念。

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

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

    String.prototype.getMostOften = function(){
        var obj = {};
        for(var i=0;i<this.length;i++){
            if(!obj[this[i]]){
                obj[this[i]] = 1;
            }else{
                obj[this[i]]++
            }
        }
        var count = 0;
        var maxValue;
        for (var key in obj) {
            if (obj[key] > count) {
                count = obj[key];
                maxValue = key
            }
        }
        return maxValue+",因为"+maxValue+"出现了"+count+"次";
    };
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch);

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

obj instanceof func
判断一个对象是否为给定引用类型的实例。内部逻辑是判断该对象的原型链上是否存在func.prototype。

function isinstanceof(obj,func){
        var oldObj=obj.__proto__;
        do{
            if(oldObj === func.prototype){
                return true;
            }else{
                oldObj=oldObj.__proto__;
            }
        }
        while(oldObj);
        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);

方法1中每创建一个People实例都会创建一个printName方法。而方法2中所有实例共享printName方法，从而节省资源。

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

Object.create()方法创建一个拥有指定原型和若干个指定属性的对象

objA=Object.create(objB.prototype)

会使得objA.proto = objB.prototype

function Parent(name,age){
  this.name=name;
  this.age=age;
}
Parent.prototype.say=function(){console.log("my name is "+this.name)}
function Child(name,age,sex){
  Parent.call(this,name,age); //继承属性
  this.sex=sex;
}
Child.prototype=Object.create(Parent.prototype)   //这里重写了Child的原型，并指定了Child.prototype的__proto__指向Parent.prototype
Child.prototype.walking=function(){console.log(this.sex)}
Child.prototype.constructor=Child;  //手动指定构造函数
var c=new Child("Clark",24,"男")

兼容性：支持ie9以上(包括ie9)，其他主流浏览器

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

hasOwnProperty判定一个属性是不是属于这个对象本身,返回布尔值
该属性为对象本身的属性，返回true；该属性为对象原型上的属性，则返回false

function Person(name,age){
    this.name = name;
    this.age = age;
  }
Person.prototype.sayName = function(){
    console.log("my name is "+this.name)
  }
var p = new Person("clark",28)
p.hasOwnProperty('name')  //true
p.hasOwnProperty('age')  //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的实例，this后面的参数则为Male实例传进的参数，从而实现Male实例继承了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(){
    console.log(this.name)
};

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

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