高级任务2：this_原型链_继承

• this 相关问题

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

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

语法

    fun.bind(thisArg[, arg1[, arg2[, ...]]])

用法:改变this指向

    this.x = 1;
    var obj = {
        x: 2,
        fn: function(){
             console.log(this.x)
        }
    }

    obj.fn() // 输出2

    var fn2 = obj.fn
    fn2() //输出 1

    var fn3 = obj.fn.bind(obj);
    fn3() //输出 2

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

  语法

  fun.apply(thisArg, [argsArray]) //第二个参数为数组
  
  如果这个函数处于非严格模式下，则指定为null和undefined的this值会自动指向全局对象(浏览器中就是window对象)
  

  用法1 : 改变this指向

  this.x = 1;
  function fn(){   
  //this指向window 
  var x = 2;
  console.log(this.x);  
  console.log(this===window)  
  }
  
  var obj = {
      x: 3
  }
  fn(); //1 true
  fn.apply();//1
  
  fn.apply(obj); // 3 false    fn里面的this指向了obj
  

  用法2 : 将数组转化为参数列表

  var numbers = [5, 6, 2, 3, 7];
  
  Math.max(5,6,2,3,7) // Math.max()中的参数不能为数组
  var max = Math.max.apply(null, numbers); //使用apply将numbers数组传入Math.max()中
  var min = Math.min.apply(null, numbers);
  

• call() 方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。

  语法

   fun.call(thisArg[, arg1[, arg2[, ...]]])
  
   如果这个函数处于非严格模式下，则指定为null和undefined的this值会自动指向全局对象(浏览器中就是window对象)
  

  用法 : 改变this指向

   this.x = 1;
   function fn(){   
   //this指向window 
   var x = 2;
   console.log(this.x);  
   console.log(this===window)  
   }
  
   var obj = {
       x: 3
   }
   fn(); //1 true
   fn.call();//1
  
   fn.call(obj); // 3 false    fn里面的this指向了obj
  

call()和apply()的区别：

call()方法的作用和 apply()方法类似，只有一个区别，就是call()方法接受的是若干个参数的列表，而apply()方法接受的是一个包含多个参数的数组。

2.以下代码输出什么?

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

输出：John: hi!

3. 下面代码输出什么，为什么

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

输出：window
func() === func.call(undefined) //此时this指向window

4.

下面代码输出什么

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

输出：#document 和 window

事件处理程序中this代表事件源DOM对象
在setTimeout中this指向全局变量window

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

var john = { 
  firstName: "John" 
}

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

输出： John
call()改变了this的指向 指向了john

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

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

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

this指向了$btn
this.showMsg不能被调用 因为此this指的是$btn

修改：

var module= {
  bind: function(){
      var _this = this
      $btn.on('click', function(){
        console.log(this) //this指向module
        _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("若愚")

image.png

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

image.png

p是构造函数person生成的对象，在生成之后，就在p对象中添加了_ proto_属性，这是一个对象。这个对象指向person中的protoType对象。而prototype是由Object函数生成的，因此protoType._ proto_指向Object.protoType。
调用p.toString( )时，在p对象中找，没有，则到proto中寻找，即到person.prototype中寻找，发现仍然没有，则继续到person.prototype._ proto_中寻找，即p._ proto_._ proto_（也就是Object.prototype）。

9.

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

String.prototype.getMostOften = function(){
     var obj = {};
     for(var i = 0 ; i < this.length; i++){
         if(obj[ this[i] ]){
             obj[this[i]]++
         }
         else{
              obj[this[i]] = 1;
         }
     }

     var max = 0;
      var word =  ''
      for( var key in obj ){
          if(obj[key] > max){
              max = obj[key]
              word = key
          }
      }
      return word + ':'+ max
}

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

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

obj instanceof func

作用：instanceOf可以判断一个对象是否是一个函数生成的。

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中所有People的实例共享printName函数，从而节约资源。

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

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

Object.create(proto, [ propertiesObject ])
// proto
一个对象，应该是新创建的对象的原型。

用法：

    function obj1(){
        this.a = 1;
        this.b = 2;
    }

    obj1.prototype.move = function(a,b){
        this.a += a
        this.b += b
                    this.c = 3
        console.log("obj1 move.")
    }

    function obj2(){
        obj1.call(this)
    }

    obj2.prototype = Object.create(obj1.prototype)

    var rect = new obj2()

    rect.move(1,2)//输出obj1 move.

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

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

 rect.hasOwnProperty('b'); //true
 rect.hasOwnProperty('c'); //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;
  }

使Male的实例拥有Person的属性。

16. 补全代码，实现继承

function inherit(Person,Male){

var _prototype = Object.create(Person.prototype)
_prototype.constructor = Male
    Male.prototype = _prototype

}

var _prototype = Object.create(Person.prototype)
_prototype.constructor = Male
Male.prototype = _prototype


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

  Person.prototype.getName = function(){
   console.log("this.name")
  };    

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

  Male.prototype.printName = function(){
      console.log(this.name)
  }
  Male.prototype.getAge = function(){
      console.log(this.age)
  };
   


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