1.apply call bind的作用與區別

apply call bind都是用來改變函數執行的上下文，也就是說，改變函數this的指向。
區別：
bind是返回對應函數，以便以后調用，而apply和call是立即調用，直接返回執行結果。apply于call的區別在于在接受參數的形式稍有區別。apply的調用形式是fn.apply(context,[argsArray]),接受數組形式的參數。call的調用形式是fn.call(context,arg1,arg2...)
eg.

bind

var obj1={
  name:"xiaoming",
  fn:function(){
    console.log(this.name)
  }
}
var obj2 = {name:xiaohu}
var fn2 = obj1.fn.bind(obj2);
fn2()   //xiaohu

call和apply

數組中沒有比較大小的方法
var arr = [1,2,3,4];
var arrMax = Math.max.apply(null,arr);//至于為什么傳null，這里的結果與this無關，無論傳什么都不會影響結果

利用數組的join方法拼接字符串
function joinStr(){
    return [].join.call(arguments,'');
}
//join用法   var arr=[a,b,c]  arr.join('-')   //a-b-c
var str = joinStr('a','b','c');   //abc

2.代碼輸出

eg.1

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

eg.2

func()         //window   首先函數申明提升，this指向window
function func(){
  alert(this)
}

eg.3

document.addEventListener("click",function(e){
  console.log(this);
  setTimeout(function(){
    console.log(this)
  },200)
},false)
// document    事件中，this指向被綁定的dom對象
//window      setTimeout中的this指向window

eg.4

var john = {
  firstName : "John"
}

function func(){
  alert(this.firstName)
}
func.call(john)      //john  call把func的執行上下文改到john中

eg.5 如有問題就修改

var module={
  bind: function(){
    $btn.on('click',function(){
      console.log(this) // this指什么     
      this.showMsg();
    })
  },
  showMsg: function(){
    console.log('小明')
  }
}
// this指$btn  $btn并無showMsg方法，this在作為對象的方法調用的時候指向這個上級對象，所以可以采取兩種方法

方法1
在this指向改變前，先把需要的this保存下來
var module={
  bind: function(){
    var _this = this     //_this就吧module保存下來了
    $btn.on('click',function(){
      console.log(this)    // this指什么     
      _this.showMsg();  
    })
  },
  showMsg: function(){
    console.log('小明')
  }
}
方法二
用bind把this的指向重新指向module
var module={
  bind: function(){
    $btn.on('click',function(){
      console.log(this) // this指什么     
      this.showMsg();
    }.bind(this))
  },
  showMsg: function(){
    console.log('小明')
  }
}

3.解釋代碼中Person,prototype,_proto,p,construtor之間的關聯

function Person(name){
  this.name = name;
}
Person.prototype.sayName =function(){
  console.log("my name is :" + this.name)
}
var p = new Person("若愚")
p.sayName()

原型.png

4.對對象p調用p.toString() ,畫出這一過程的原型圖，解釋原型鏈

也如上圖，p是是Person的一個實例，每一個Person的實例都有proto,
指向Person的原型鏈Prototype，Person.prototype中的construtor指向函數Person，Person也是一個對象,所以Proson.prototype.proto指向了對象，而Object中就有toString()方法。

在調用p.toString()的時候，首先會現在實例p中尋找toString(),沒找到就在proto，也就是Person.prototype中尋找，還沒找到，就繼續向原型方向p.proto.proto中尋找，找到了，拿出來使用。

5.對str做拓展，實現獲取字符串中出現頻率最高的字符

String.prototype.getMostOfften = function(){
  var obj = {},
      maxTime = 0,
      tarLetter;  
  for(var i=0; i<this.length; i++){
    var key = this[i]
    if (!obj[key]) {
         obj[key] = 1;
     } else {
          obj[key]++;
    }
  }

  for(key in obj){
    if(obj[key] > maxTime){
      maxTime = obj[key]
      tarLetter = key;
    }
  }
   return tarLetter;
}
var str = "ahbbccdeeddddfg";
var ch = str.getMostOfften();

console.log(ch) // d   5ci

6.instanceOf有什么用？內部邏輯如何實現？

instanceOf用來測試一個對象在其原型鏈中是否存在一個構造函數的 prototype 屬性

內部邏輯：沿著原型鏈向上查找，查找對象的原型鏈上的 __ proto __ 屬性是否是某個構造函數的prototype屬性，若存在則返回true，若查找到頂端也沒找到則返回false。

7.繼承有什么作用？

繼承可以使子類共享父類的屬性和方法，覆蓋和擴展父類的屬性和方法

8.兩種寫法的代碼區別

//fangfa1
function People(name,sex){
  this.name = name;
  this.sex = sex;
  this.printName = function(){
    console.log(this.name);
  }
}
var p1 = new People("小明"，18)
var p2 = new People("xiaohu",19)
console.log(p1.printName==p2.printName) //false

printName()是在每創建一個實例的時候都會創建一遍,所以二者并不相等

//fangfa2
function Person(name,sex){
  this.name = name;
  this.sex = sex;
}
Person.prototype.printName = function(){
  console.log(this.name)
}
var p1 = new Person("小虎"，20)
var p1 = new Person("xiaoming"，20)

console.log(p1.printName==p2.printName) // true
二者相等，證明二者指向了同一個函數，printName這一函數制備創建了一遍，是公用的。可節省內存。

9.Object.create有什么用？兼容性

Object.create是在ES5中規定的 ，作用是使用指定的原型對象及其屬性去創建一個新的對象，IE9以下無效。

Object.create(proto, [ propertiesObject ])


//Shape - superclass
function Shape() {
  this.x = 0;
  this.y = 0;
}

Shape.prototype.move = function(x, y) {
    this.x += x;
    this.y += y;
    console.info("Shape moved.");
};

// Rectangle - subclass
function Rectangle() {
  Shape.call(this); //call super constructor.
}

// subclass extends superclass
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;

var rect = new Rectangle();

console.log('Is rect an instance of Rectangle?',
  rect instanceof Rectangle); // true
console.log('Is rect an instance of Shape?',
  rect instanceof Shape); // true

rect.move(1, 1); //Outputs, "Shape moved."

10.hasOwnProperty有什么用？怎么用

hasOwnProperty() 方法會返回一個布爾值，指示對象是否具有指定的屬性作為自身（不繼承）屬性。

o = new Object();
o.prop = 'exists';

function changeO() {
  o.newprop = o.prop;
  delete o.prop;
}

o.hasOwnProperty('prop');   // 返回 true
changeO();
o.hasOwnProperty('prop');   // 返回 false

11.代碼中的call作用什么？

function Person(name,sex){
  this.name = name;
  this.sex = sex;
}
function Male(name,sex,age){
  Person.call(this,name,sex) // 這里的call把Male函數里的this傳遞給Person，作為Person執行的上下文，這樣Male也擁有自己的name和sex屬性。
  this.age = age;
}

12.實現繼承

function Person(name,sex){
  this.name = name
  this.sex = sex
}
Person.prototype.getName = function(){
  console.log("my name is " + this.name)
}
Person.prototype.printName = function(){
  console.log("my name is " + this.name + " and I am " + this.age + " years old")
}
function Male(name,sex,age){
  Person.call(this,name,sex)
  this.age = age
}
Male.prototype.getAge = function(){
  console.log("I am " + this.age + "years old")
}

Male.prototype=Object.create(Person.prototype)
Male.prototype.__proto__.constructor = Male

var xiaoming = new Male('小明','男',18);
xiaoming.printName();