this_原型链_继承

一、this 相关问题

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

• bind，返回一个新函数，并且使函数内部的this为传入的第一个参数，见示例

    function Fn(name){
      this.name = name
      setTimeout(function(){
        console.log('name:' + this.name)
      },200)
    }
    var fn = new Fn('chen')  //结果为name:，此时setTimeout中this为全局对象即：window

    function Fn(name){
      this.name = name
      setTimeout(function(){
        console.log('name:' + this.name)
      }.bind(this),200)//结果为name:chen
    }
    var fn = new Fn('chen')

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

    var obj4 = {
      value: 200
    }
    function fn4(a,b){
      console.log(this.value + a + b)
    }
    fn4(3,4) // NaN
    fn4.call(obj4,3,4) //207
 var obj4 = {
      value: 200
    }
    function fn4(){
      console.log(this.value + 3 + 4)
    }
    fn4() // NaN
    fn4.apply(obj4) //207

2.以下代码输出什么?

 var john = { 
  firstName: "John" 
}
function func() { 
  alert(this.firstName + ": hi!")
}
john.sayHi = func
 john.sayHi() //转化john.sayHi.call(john)，this对象为john
                   //输出结果为：joh:hi!

3.以下代码输出什么?

func() //输出：object Window，作为函数调用，this绑定到全局对象中，在浏览器中，window就是该全局对象
function func() { 
  alert(this)
}

4.以下代码输出什么?

document.addEventListener('click', function(e){
    console.log(this);  //输出document，调用函数的那个对象
    setTimeout(function(){
        console.log(this);
    }, 200);//输出window，setTimeout、setInterval这两个方法执行的函数this是全局对象
}, false);

5.下面代码输出什么，why

var john = { 
  firstName: "John" 
}
function func() { 
  alert( this.firstName )
}
func.call(john)  //输出：john，call(john)设置this对象为john

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

var module= {
  bind: function(){
    $btn.on('click', function(){
      console.log(this) //this指的$btn，此时this.showMsg()无法执行
      this.showMsg();
    })
  },
  showMsg: function(){
    console.log('饥人谷');
  }
}

修改

var module= {
  bind: function(){
    var _this = this
    $btn.on('click', function(){
      console.log(this) 
      _this.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 是构造函数内部的一个属性， 指向 Person.prototype
__proto__ 是 p 实例化出来的一个属性，p.__proto__ 指向 Person.prototype
constructor 指向 Person
p.__proto__ === Person.prototype
Person.prototype.constructor === Person

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

image.png test

toString从Object.prototype.__proto__中来

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

在本例中，对对象p调用toString()，先查找自身，没有。找自身对应的原型（p.__proto__对应的Person.prototype.__proto__），没有，继承查找上一级（Object.prototype.__proto__）

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

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

代码

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

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

instanceof操作符，用于判断一个对象是不是某个类型的实例
它是通过测试一个对象(object)的原型链上是否有某个构造函数的原型(prototype)

function C(){} 
function D(){} 
var o = new C();
o instanceof C; // true，因为 Object.getPrototypeOf(o) === C.prototype
o instanceof D;// false，因为 D.prototype不在o的原型链上
实现方法：查找原型链，0.__proto_是否等于c.prototype，若不相等继续查找，0.__proto_._proto__是否等于c.prototype，直到查找完整个原型链，如果没有发现，则：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)  //p1中两个属性和一个方法均为自有
//方法2
function Person(name, sex){
    this.name = name;
    this.sex = sex;
}
Person.prototype.printName = function(){
    console.log(this.name);
}
var p1 = new Person('若愚', 27); //p2中两个属性为自有，方法为共有

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

作用：通过Object.create可以clone了一个新的prototype而不是直接把原有的prtotype直接赋值，子类的prototype改为父类的prototype的备份。
与之作用相同的代码

var fn = function(){}
fn.prototype = person.prototype
student.prototype = new fn()

语法 Object.create(proto, [ propertiesObject ])
参数
proto 一个对象，应该是新创建的对象的原型。
propertiesObject 可选。该参数对象是一组属性与值，该对象的属性名称将是新创建的对象的属性名称，值是属性描述符（这些属性描述符的结构与Object.defineProperties()的第二个参数一样）。注意：该参数对象不能是 undefined，另外只有该对象中自身拥有的可枚举的属性才有效，也就是说该对象的原型链上属性是无效的。

兼容性：Object.create是ES5方法，IE9以下无效

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

作用：可以判断一个对象是否包含自定义属性而不是原型链上的属性，hasOwnProperty是JavaScript中唯一一个处理属性但是不查找原型链的函数
使用： s.hasOwnProperty('name') 其中s为实例化对象，name为属性值，也可以为函数名

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

function Person(name, sex){
    this.name = name;
    this.sex = sex;
}
function Male(name, sex, age){
    Person.call(this, name, sex);    //call的第一个参数设置this的对象为Male
    this.age = age;
}

16.补全代码，实现继承

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
}
var fn = function(){}
fn.prototype = Person.prototype
Male.prototype = new fn()
Male.prototype.constructor = Male
Male.prototype.getAge = function(){
    console.log(this.age)
};
var ruoyu = new Male('若愚', '男', 27);
ruoyu.getName();  //若愚