this | inherit

this | 变量 | 继承

bind 设置 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

一个函数名.bind(参数)()相当于去生成一个新的函数，这个函数里面的this就是，你传递的这个参数

这个新的函数，跟App.sayName()，已经不是一个东西了

作用：

例 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 代表当前的 dom 节点
}
Page.init()  // 所以会报错

var Page = {
  init: function(){
    this.node = document.body
    this.bind()
  },
  bind: function(){
    var _this = this
    this.node.addEventListener('click',  this.sayHello.bind(this))
    // 第一二个 this 为 Page 的 this，第三个 this 指当前节点
  },
  sayHello: function(){
    console.log('hello...' + this.node.innerText)
  }  // this 代表当前的 节点
}
Page.init()  // 这里实现跟第一个例子相同的结果

例 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);

如何让它们全部都是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 设置 this

apply相当于call的写法，用数组传递

例 1：遍历传入的数组，做加法

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)  // 同上面的结果

function sum(){
  var args = Array.prototype.slice.call(arguments, 0)
  // 通过这句话把 argument 类数组对象，变成了一个数组
  console.log(Array.isArray(args))
  console.log(args)
}
sum(1,2,3)

例 2：得到数组的最大值，最小值

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

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

三种变量

实例变量：（this）类的实例才能访问到的变量

静态变量：（属性）直接类型对象能访问到的变量

私有变量：（局部变量）当前作用域内有效的变量

例子：

function ClassA(){
    var a = 1; //私有变量，只有函数内部可以访问
    this.b = 2; //实例变量，只有实例可以访问
}

ClassA.c = 3; // 静态变量，也就是属性，类型访问

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 到底是干什么的