this | 變量 | 繼承

bind 設(shè)置 this

var name = 'global'
var App = {
  name: 'app',
  sayName: function(){
    console.log(this.name)
  }
}
var obj = {
  name: 'hello'
}

App.sayName()  // app
App.sayName.bind(window)()   // global
App.sayName.bind(obj)()  // hello

一個(gè)函數(shù)名.bind(參數(shù))()相當(dāng)于去生成一個(gè)新的函數(shù)，這個(gè)函數(shù)里面的this就是，你傳遞的這個(gè)參數(shù)

這個(gè)新的函數(shù)，跟App.sayName()，已經(jīng)不是一個(gè)東西了

作用：

例 1

var Page = {
  init: function(){
    this.node = document.body
    this.bind()
  },
  bind: function(){
    var _this = this
    this.node.addEventListener('click', function(){
      _this.sayHello()
    })
  },
  sayHello: function(){
    console.log('hello...' + this.node.innerText)
  }
}
Page.init()

var Page = {
  init: function(){
    this.node = document.body
    this.bind()
  },
  bind: function(){
    var _this = this
    this.node.addEventListener('click',  this.sayHello)  // this 為 Page 的 this
  },
  sayHello: function(){
    console.log('hello...' + this.node.innerText)
  }  // this 代表當(dāng)前的 dom 節(jié)點(diǎn)
}
Page.init()  // 所以會(huì)報(bào)錯(cuò)

var Page = {
  init: function(){
    this.node = document.body
    this.bind()
  },
  bind: function(){
    var _this = this
    this.node.addEventListener('click',  this.sayHello.bind(this))
    // 第一二個(gè) this 為 Page 的 this，第三個(gè) this 指當(dāng)前節(jié)點(diǎn)
  },
  sayHello: function(){
    console.log('hello...' + this.node.innerText)
  }  // this 代表當(dāng)前的 節(jié)點(diǎn)
}
Page.init()  // 這里實(shí)現(xiàn)跟第一個(gè)例子相同的結(jié)果

例 2

document.addEventListener('click', function(e){
    console.log(this);  // document
    var _document = this;
    setTimeout(function(){
        console.log(this);  // window
        console.log(_document);  // document
    }, 200);
}, false);

如何讓它們?nèi)慷际?code>document，看下面

document.addEventListener('click', function(e){
    console.log(this);  // document
    var _this = this;  // 所以用 .bind(this)，就可以不用這么定義了
    setTimeout((function(){
        console.log(this);  // document
        console.log(_this);  // document
    }).bind(this), 200);  // .bind(this)
}, false);

所以用.bind(this)，就可以不用定義var _this = this了

call | apply 設(shè)置 this

apply相當(dāng)于call的寫法，用數(shù)組傳遞

例 1：遍歷傳入的數(shù)組，做加法

function sum(){
  var result = 0
  for(var i = 0; i < arguments.length; i++){
    console.log(arguments[i])
    result += arguments[i]
  }
  console.log(result)
}
sum(1,2,3)

function sum(){
  var result = 0
  Array.prototype.forEach.call(arguments, function(value){
    console.log(value)
    result += value
  })
  console.log(result)
}
sum(1,2,3)  // 同上面的結(jié)果

function sum(){
  var args = Array.prototype.slice.call(arguments, 0)
  // 通過這句話把 argument 類數(shù)組對(duì)象，變成了一個(gè)數(shù)組
  console.log(Array.isArray(args))
  console.log(args)
}
sum(1,2,3)

例 2：得到數(shù)組的最大值，最小值

Math.max(3,4,5,6)  // 6，Math.max()是一個(gè)方法

var arr = [2,5,0,2,9,6]
Math.max.apply(null, arr)  // 9
Math.min.apply(null, arr)  // 0

三種變量

實(shí)例變量：（this）類的實(shí)例才能訪問到的變量

靜態(tài)變量：（屬性）直接類型對(duì)象能訪問到的變量

私有變量：（局部變量）當(dāng)前作用域內(nèi)有效的變量

例子：

function ClassA(){
    var a = 1; //私有變量，只有函數(shù)內(nèi)部可以訪問
    this.b = 2; //實(shí)例變量，只有實(shí)例可以訪問
}

ClassA.c = 3; // 靜態(tài)變量，也就是屬性，類型訪問

console.log(a); // error
console.log(ClassA.b) // undefined
console.log(ClassA.c) //3

var classa = new ClassA();
console.log(classa.a);//undefined
console.log(classa.b);// 2
console.log(classa.c);//undefined

參考

this 課件
this 的值到底是什么？一次說清楚
你怎么還沒搞懂 this
js 的 new 到底是干什么的