this_原型链_继承

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

• call apply，调用一个函数，传入函数执行上下文及参数
  语法很简单，第一个参数都是希望设置的this对象，不同之处在于call方法接收参数列表，而apply接收参数数组

  fn.call(context, param1, param2...)
  fn.apply(context, paramArray)
  

  应用场景常常是这样的：

  //借用别的对象的方法
  var arr = [5, 10, 4, 0, 3];
  var max = Math.max.apply(null, arr),
      Max = Math.max.call(null, 5, 10, 4, 0, 3);
  

• Function.prototype.bind()方法返回一个新函数，并将传入的第一个参数作为函数内部的this
  语法：
  fun.bind(thisArg[, arg1[, arg2[, ...]]])
  典型例子：

  this.x = 9; 
  var module = {
    x: 81,
    getX: function() { return this.x; }
  };
  
  module.getX(); // 返回 81
  
  var retrieveX = module.getX;
  retrieveX(); // 返回 9, 在这种情况下，"this"指向全局作用域
  
  // 创建一个新函数，将"this"绑定到module对象
  // 容易被全局的x变量和module里的属性x所迷惑
  var boundGetX = retrieveX.bind(module);
  boundGetX(); // 返回 81
  

  强行绑定：
  var fn1 = obj.fn.bind(obj1) //this从obj变为obj1

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

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

题目2输出

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

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

题目3输出

原因：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，call的第一个参数把被调用函数func()的
                 执行上下文改为john

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

var module= {
  bind: function(){
    $btn.on('click', function(){
      console.log(this) //this指$btn
      this.showMsg();//此处的this即执行上下文是$btn，它没有对应的方法
                       showMsg()
    })
  },
  
  showMsg: function(){
    console.log('饥人谷');
  }
}

修改：

$btn = $('.click');

  var module= {
    bind: function(){
      console.log(this);
      var that = this;
      $btn.on('click', function(){
        console.log(this); 
        that.showMsg();
      })
    },

    showMsg: function(){
      console.log('饥人谷');
    }
  };
  module.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();

①p.__proto__ === Person.prototype
②Person.prototype.constructor === Person
①,②===p.__proto__.constructor === Person

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

toString是原型链上从object继承过来的方法

原型链是针对构造函数的，比如我们先创建了一个函数，然后通过一个变量new了这个函数，那么这个被new出来的函数就会继承创建出来的那个函数的属性，当我访问new出来的这个函数的某个属性，在这个new出来的函数中没有定义这个变量，那么它就会往上（向创建出它的函数中）查找。如果找不到，还会重复上述查找过程往其父函数中查找。这个查找的过程就叫做原型链。

image.png

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

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

String.prototype.getMostOften =function(){
  var obj = {};
  var mostStr = {
    str: '',
    count: 0
  };
  for(var i = 0;i < this.length; i++){
    if(obj[this[i]]){
      obj[this[i]]++
    }
    else{
      obj[this[i]] = 1
    }
    if(obj[this[i]] > mostStr.count){
      mostStr.str = this[i];
      mostStr.count = obj[this[i]]
    }
  }
  return 'The most frequent letter is "' + mostStr.str + '",which has appeared ' + mostStr.count + ' times.';
};
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch);//The most frequent letter is "d",which has appeared 5 times.

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

• instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上
  简单来说，就是判断一个对象是否为另一个对象的实例
  一个mdn例子：

// 定义构造函数
function C(){} 
function D(){} 

var o = new C();


o instanceof C; // true，因为 Object.getPrototypeOf(o) === C.prototype


o instanceof D; // false，因为 D.prototype不在o的原型链上

o instanceof Object; // true,因为Object.prototype.isPrototypeOf(o)返回true
C.prototype instanceof Object // true,同上

C.prototype = {};
var o2 = new C();

o2 instanceof C; // true

o instanceof C; // false,C.prototype指向了一个空对象,这个空对象不在o的原型链上.

D.prototype = new C(); // 继承
var o3 = new D();
o3 instanceof D; // true
o3 instanceof C; // true

继承相关问题

如何理解继承

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

同样都是为People添加printName方法，但方法一是直接添加在People函数中，而方法二是添加在对应函数的prototype对象上。调用方法一时，每个实例化对象中都有他们自己的方法（和方法一相同的作用），而调用方法二时，不同的People对象都指向同一个方法，相比方法一达到了节省空间的效果。

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

• 作用：

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

Male.prototype.printAge = function(){
    console.log(this.age);
};

在类似上述情况中，由于引用关系，导致后续修改子类的prototype也修改了父类的prototype，因为修改的是一个值。
但是如果通过Object.createclone了一个新的prototype而不是直接把Person.prtotype直接赋值，把子类的prototype改为父类的prototype的备份，就可以避免以上情况。

• 兼容性：

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

作用：
hasOwnProperty() 方法会返回一个布尔值，指示对象是否具有指定的属性作为自身（不继承）属性。
使用：

m.hasOwnProperty('name'); // 输出true，判断name是否是实例化对象m自身的属性。
m.hasOwnProperty('printName'); // false
Male.prototype.hasOwnProperty('printAge'); // true

问题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的执行上下文改为Male的执行上下文，即将Male中的name和sex值用于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){
   People.call(this, name, sex);
   this.age = age;
}

Male.prototype = Object.create(People.prototype);
Male.prototype.consructor = Male;
Male.prototype.getAge = function(){
    cosole.log(this.age);
};

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