this_原型链_继承

this

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

• apply() 方法调用一个函数, 其具有一个指定的this值，以及作为一个数组（或类似数组的对象）提供的参数。

  语法：fun.apply(thisArg, [argsArray])
  thisArg：
    在 fun 函数运行时指定的 this 值。如果这个函数处于非严格模式下，则指定为 null 或
    undefined 时会自动指向全局对象。
  argsArray：
    一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 fun 函数。
  

• call()方法和apply()方法类似，只有一个区别，计算call()方法接收若干个参数的列表，而apply()方法接收的是一个包含多个参数的数组。

• bind()方法创建一个新的函数, 当被调用时，将其this关键字设置为提供的值，在调用新函数时，在任何提供之前提供一个给定的参数序列。

  语法：fun.bind(thisArg[, arg1[, arg2[, ...]]])
  thisArg
    当绑定函数被调用时，该参数会作为原函数运行时的 this 指向。当使用new 操作符调用绑定函数时，
    该参数无效。
  arg1, arg2, ...
    当绑定函数被调用时，这些参数将置于实参之前传递给被绑定的方法。
  返回值
    返回由指定的this值和初始化参数改造的原函数拷贝
  

以下代码输出什么?

var john = { 
  firstName: "John" 
}
function func() { 
  alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()  // John: hi!
// this为执行上下文，当一个函数作为对象的方法调用时，this默认指向这个对象

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

func() // [object Window]
function func() { 
  alert(this)
}
// 当直接调用一个函数时，相当于执行window.func()所以this指向window对象

下面代码输出什么？

document.addEventListener('click', function(e){
    console.log(this);
    setTimeout(function(){
        console.log(this);
    }, 200);
}, false);
// 输出：#document  、     Window{}
// 第一个：事件中的this默认指向绑定这个事件的对象。
// 第二个：setTimeout的执行函数中的this默认指向window对象

下面代码输出什么，why?

var john = { 
  firstName: "John" 
}

function func() { 
  alert( this.firstName )
}
func.call(john) // Jojn
// call方法用于在函数运行时指定this指，因此执行以上代码时this指向john对象

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

var module= {
  bind: function(){
    $btn.on('click', function(){
      console.log(this) //this指$btn对象
      this.showMsg();
    })
  },
  
  showMsg: function(){
    console.log('饥人谷');
  }
}
// 在事件处理函数中this指向$btn,而$btn没有showMsg()方法
// 修改：将外部this保存到一个变量中
var module= {
  bind: function(){
    var self = this
    $btn.on('click', function(){
      console.log(this)
      self.showMsg();
    })
  },
  
  showMsg: function(){
    console.log('饥人谷');
  }
}

原型链

有如下代码，解释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();  // 'My name is: 若愚'
// Person是一个函数，它拥有一个prototype属性，这个属性指向一个对象，而这个对象拥有一个
constructor属性，这个属性指向Person函数
// 当Person作为构造函数调用时，会先初始化一个对象，将this指向这个对象，并将它的__proto__属性指
向Person.prototype,因此p.name === "若愚",p.sayName() === Person.prototype.sayName()

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

• toString来自Object.prototype。如图：

• 如上图所示，当在Person的原型找不到某个方法时，就会沿着它的__proto__逐层向上，直到找到或__proto__属性为空为止，这个__proto__属性组成的链，就是原型链

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

String.prototype.getMostOften = function() {
  var  obj = {}
  var strArr = this.split('')
  strArr.forEach(function(i) {
    if (obj[i]) {
      obj[i]++
    } else {
      obj[i] = 1
    }
  })

  var max = 0, maxStr
  for (var x in obj) {
    if (obj[x] > max) {
      maxStr = x
      max = obj[x]
    }
  }

  return maxStr
}
var str = 'ahbbccdeddddfg';
var ch = str.getMostOften();
console.log(ch); //d

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

• instanceof用于判断一个对象的类型，那么它的判断规则是什么？
  • Instanceof运算符的第一个变量一般是一个对象，暂时称为A；第二个变量一般是一个函数，暂时称为B。
  • Instanceof的判断规则是：沿着A的__proto__这条线来找，同时沿着B的prototype这条线来找，如果两条线能找到同一个引用，即同一个对象，那么就返回true。如果找到终点还未重合，则返回false。

继承

继承有什么作用?

• 继承关系是传递的。若类C继承类B，类B继承类A，则类C既有从类B那里继承下来的属性与方法，也有从类A那里继承下来的属性与方法，还可以有自己新定义的属性和方法。继承来的属性和方法尽管是隐式的，但仍是类C的属性和方法。继承是在一些比较一般的类的基础上构造、建立和扩充新类的最有效的手段。
• 继承提供了软件复用功能。若类B继承类A，那么建立类B时只需要再描述与基类(类A)不同的少量特征(数据成员和成员方法)即可。这种做法能减小代码和数据的冗余度，大大增加程序的重用性。
• 继承通过增强一致性来减少模块间的接口和界面，大大增加了程序的易维护性。

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

//方法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构造的每个对象都拥有相同的printName方法，
使用方法2构造的每个对象调用printName方法时都是调用的Person.prototype.printName方法
方法2大大节省了内存

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

• Object.create() 方法会使用指定的原型对象及其属性去创建一个新的对象。兼容ie9及以上浏览器

  var p1 = Object.create(xxx.prototype)   相当于：
  var fn = {}
  fn.__proto__ = xxx.prototype
  var p1 = fn
  

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

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

  遍历一个对象所有自身属性：
  var buz = {
      fog: 'stack'
  };
  
  for (var name in buz) {
      if (buz.hasOwnProperty(name)) {
          alert("this is fog (" + name + ") for sure. Value: " + buz[name]);
      }
  }
  

如下代码中call的作用是什么?

function Person(name, sex){
    this.name = name;
    this.sex = sex;
}
function Male(name, sex, age){
    Person.call(this, name, sex);    
    //调用Person函数，并把它的this变为Male函数的this，用此方法可实现对Person实例属性的继承
    this.age = age;
}

补全代码，实现继承

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

Person.prototype.printName = 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.getAge = function(){
    console.log(this.age)
};

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