高级2-this、原型链、继承

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

bind: 返回一个新函数，并且使函数内部的this为传入的第一个参数，用来切换作用域，任何函数都有bind的方法

var obj1 = {
    name: 'Byron',
    fn : function(){
        console.log(this);
    }
};
var fn3 = obj1.fn.bind(obj1)
fn3()
//此时如果没有bind,调用fn3()返回的是window

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

var value = 100
    var obj4 = {
        value: 200
    }
    function fn4(a,b){
        console.log(this.value + a + b)
    }
    fn4(3, 4)
    fn4.call(obj4, 3, 4)
    fn4.call(obj4, [3, 4])

apply的使用

var arr = [1,2,3,7]
console.log(Math.max.apply(null, arr))

call的使用

function joinStr(){
  console.log(Array.prototype.join.call(arguments, '-'))
}
joinStr('a','b','c')

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

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

弹出一个alert写着 John: hi!
使func赋值给了john的方法sayHi，然后john调用sayHi，则this指向john

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

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

输出的[object Window]
alert里的this是全局对象window

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

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

输出的
#document
Window
第一个this执行后是document
第二个this执行后是全局对象window

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

var john = { 
  firstName: "John" 
}

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

输出的一个alertJhon
因为func.call(john)是func调用了john的this

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

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

因为此时this指向$btn，this.showMsg()不生效

var module= {
  bind: function(){
    $btn.on('click', function(){
      console.log(this) //this指什么
      this.showMsg();
    }.bind(this))
  },
  
  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();

p中的__proto__属性指向了Person对象中的prototype属性，prototype属性，包含着__proto__、constructor、sayName。

Person.prototype.constructor===Person
p.__proto__.constructor===Person
p.constructor===Person

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

调用的p.toString是从原型链中找到的，如果对toString进行赋值，所赋值的toString会覆盖原型中的toString

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

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

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

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

instanceOf用来判断一个对象是不是某个类型的实例。判断依据是这个对象的__proto__是否等于类型的prototype，如果相等结论是true，如果不相等找对象.__proto__.__proto__....__proto__此时如果还是不等于该函数的prototype结论为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);

将printName这个方法放到prototype中，可以在prototype中调用，节省资源，不会每一次的调用就会新建一个printName的属性。

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

创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。
NewObject.prototype = Object.create (OldObject.prototype)

如果不能用es5的语法想达到object.create的功能可以使用以下写法

fn.prototype = OldObject.prototype
function fn(){}//创建一个空函数，将所需对象原型传入，再传入新对象。
NewObject.prototype = new fn()

object.create的兼容情况链接

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

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

以16题为例：

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

    Person.prototype.getName = function(){
        console.log('My name is' + ' ' + 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('ruoyu', 'male', 35);
    ruoyu.getName()
    ruoyu.printName();
    ruoyu.getAge()

ruoyu.hasOwnProperty('getAge')//false
ruoyu.hasOwnProperty('name')//true
真正属于ruoyu的属性只有：name，age，sex。其余的都在它的原型上面

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

此时的this指Male，然后继承Person中的sex和age

问题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('My name is' + ' ' + 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('ruoyu', 'male', 35);
    ruoyu.getName()
    ruoyu.printName();
    ruoyu.getAge()