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
