this 相关问题

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

1. call()

var a = {
    user:"小学生",
    fn:function(){
        console.log(this.user);  //小学生
    }
}
var b = a.fn;
b.call(a);

通过在call方法，可以改变函数的执行上下文，简单的说就是改变this值的指向对象

call方法除了第一个参数以外还可以添加多个参数，如下：

var a = {
    user:"小学生",
    fn:function(a, b){
        console.log(this.user); //小学生
        console.log(a+b); //3
    }
}
var b = a.fn;
b.call(a,1,2);

2. apply()

apply方法和call方法有些相似，它也可以改变this的指向

var a = {
    user:"小学生",
    fn:function(){
        console.log(this.user); //小学生
    }
}
var b = a.fn;
b.apply(a);

同样apply也可以有多个参数，但是不同的是，第二个参数必须是一个数组，如下：

var a = {
    user:"小学生",
    fn:function(a, b){
        console.log(this.user); //小学生
        console.log(a+b); //11
    }
}
var b = a.fn;
b.apply(a,[10,1]);

或者

var a = {
    user:"小学生",
    fn:function(a, b){
        console.log(this.user); //小学生
        console.log(a+b); //11
    }
}
var b = a.fn;
var arr = [1,10]
b.apply(a, arr);

//注意如果call和apply的第一个参数写的是null，那么this指向的是window对象

var a = {
    user:"小学生",
    fn:function(){
        console.log(this); //Window {external: Object, chrome: Object, document: document, a: Object, speechSynthesis: SpeechSynthesis…}
    }
}
var b = a.fn;
b.apply(null);

3. bind()

bind方法和call、apply方法有些不同，但是不管怎么说它们都可以用来改变this的指向。

先来说说它们的不同吧。

var a = {
    user:"小学生",
    fn:function(){
        console.log(this.user);
    }
}
var b = a.fn;
b.bind(a);

我们发现代码没有被打印，对，这就是bind和call、apply方法的不同，实际上bind方法返回的是一个修改过后的函数。

var a = {
    user:"小学生",
    fn:function(){
        console.log(this.user);
    }
}
var b = a.fn;
var c = b.bind(a);
console.log(c); //function() { [native code] }

那么我们现在执行一下函数c看看，能不能打印出对象a里面的user

var a = {
    user:"小学生",
    fn:function(){
        console.log(this.user); //小学生
    }
}
var b = a.fn;
var c = b.bind(a);
c();

ok，同样bind也可以有多个参数，并且参数可以执行的时候再次添加，但是要注意的是，参数是按照形参的顺序进行的。

var a = {
    user:"小学生",
    fn:function(e,d,f){
        console.log(this.user); //小学生
        console.log(e,d,f); //10 1 2
    }
}
var b = a.fn;
var c = b.bind(a,10);
c(1,2);

总结：call和apply都是改变上下文中的this并立即执行这个函数，bind方法可以让对应的函数想什么时候调就什么时候调用，并且可以将参数在执行的时候添加，这是它们的区别，根据自己的实际情况来选择使用。

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

var john = { 
  firstName: "John" 
}
function func() { 
  alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()
//出现弹窗显示 john: hi!
this指向调用sayHi()的john对象

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

func() 
function func() { 
  alert(this)
}
// 弹窗显示[object Window] 
因为在func函数里这个this 指向全局对象 window

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

document.addEventListener('click', function(e){
    console.log(this);            //输出document, 在事件处理程序中this代表事件源DOM对象
    setTimeout(function(){
        console.log(this);       //输出window, setTimeout和setInterval执行的函数this是全局对象
    }, 200);
}, false);

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

var john = { 
  firstName: "John" 
}

function func() { 
  alert( this.firstName )
}
func.call(john)
// 弹窗显示 John
call 方法改变了 this的指向，使this指向对象john

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

var module= {
  bind: function(){
    $btn.on('click', function(){
      console.log(this) //这里的this指$btn
      this.showMsg();  //$btn上没有showMsg()这个方法
    })
  },

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

修改后：
var module= {
  bind: function(){
     var that = this                  // 缓存指向modeule对象的this
    $btn.on('click', function(){
      console.log(this) //这里的this指$btn
      that.showMsg();  //that指向modeule ，modeule上有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();

• Person 是函数定义的类，类（函数）会自动获得属性prototype。
• p是Person 的实例，每个实例都有一个内部属性 __proto__， __proto__指向构造这个实例的对象的 prototype属性。
• prototype是构造函数内部的原型对象，所以拥有 contructor和 __proto__属性。constructor指向了构造函数Person。

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

当调用 p.tostring() 时, 先会在 p 里找 tostring 方法, 找不到会沿着 __proto__ 到 Person.prototype 中找,还找不到就接着沿着 __proto__ 找, 直到在 object.prototype 中找到为止
p.__proto__ ==> Person.prototype.__proto__ ==> object.prototype

原型链：
p.toString()方法，先从p的属性里面找，没有，
再从p.proto中找，还是没有
再从p.proto.proto中找，找到了，
这样沿着proto这个链子一路找下去，就是原型链

image.png

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

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

代码如下：

String.prototype.getMostOften = function() {
    var obj = {}, char;
    for(var i=0; i<this.length; i++) {
        char = this[i];
        if(obj[char]) {
            obj[char]++;
        }else {
            obj[char] = 1; 
        }
    }
    var maxchar = "", max = 0;
    for ( var key in obj) {
        if(obj[key] > max) {
            max = obj[key];                  // 始终保持最大值
            maxchar = key;
        }
    }
    return maxchar;
}
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d , 因为d 出现了5次

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

概述

instanceof运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上

语法

obj instanceof Object;//true 实例obj在不在Object构造函数中

举个例子:

模拟 A instanceof B

function _instanceof(A, B) {
    var O = B.prototype;// 取B的显示原型
    A = A.__proto__;// 取A的隐式原型
    while (true) {
        //Object.prototype.__proto__ === null
        if (A === null)
            return false;
        if (O === A)// 这里重点：当 O 严格等于 A 时，返回 true
            return true;
        A = A.__proto__;
    }
}

继承相关问题

问题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** 方法。
• 区别是方法一是在** Person** 的实例对象里创建 ** printName** 方法，这样每创建一个新的实例都会有一个新的 ** printName** 方法。
• 方法二是在** Person ** 的原型链上创建 ** printName** 方法， 这样每一个实例只需要调用原型链上的方法，比较节约内存。

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

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

child = Object.create(parent.prototype)
不使用Object.create的方法
function fn(){}
chlid.prototype = new fn();
fn.prototype = parent.prototype;

image.png

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

hasOwnPerperty 是 Object.prototype 的一个方法，可以判断一个对象是否包含自定义属性而不是原型链上的属性
hasOwnProperty 是 **JavaScript ** 中唯一 一个处理属性但是不查找原型链的函数

obj.hasOwnProperty(prop)
//prop : 要检查的属性名
//obj: 要检查的对象
//返回一个布尔值

问题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.call(this, name, sex); 使函数Person 的 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.constructor = Male;
Male.prototype.printName = function (){
    console.log(this.name);
}
Male.prototype.getAge = function(){
    console.log(this.age);
};

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