this是什么？
对JavaScript中this存在的两种误解：
- this指向函数本身
- this指向函数作用域
作用域无法通过JavaScript代码进行访问，它存在于JavaScript引擎内部，每当把this和词法作用域的查找混合使用时，这是无法实现的。
this是在运行时进行绑定，也就是执行上下文的创建阶段，并不是在编写时绑定，它的上下文取决于函数调用时的各种条件。this的绑定和函数声明的位置没有任何关系，只取决于函数的调用位置（也就是函数的调用方式）
var foo = 'gloabl foo'
var myObj = {foo: 'myObj foo'}
var say = function() {
console.log(this.foo)
}
myObj.say = say
myObj.say() // myObj foo
say() // global foo
为什么使用this？
this提供了一种更优雅的方式来隐式“传递”对象引用，因此可以讲api设计得更加简洁并易于复用。
var me = {name: 'jack'}
// 不使用this
function speak(name) {
console.log('hello, i am' + name)
}
speak(me.name) // hello, i am jack
// 使用this
function speak() {
console.log('hello, i am' + this.name)
}
speak.call(me) // hello, i am jack
this的四大绑定规则
1、默认绑定
函数调用类型，this指向全局对象
var a = 'foo'
function foo() {
console.log(this.a)
}
foo() // foo
在严格模式下，全局对象无法使用默认绑定，因此this会绑定到undefined
var a = 'foo'
function foo() {
'use strict'
console.log(this.a)
}
foo() // TypeError: this is undefined
2、隐式绑定
调用值是否有上下文对象，或者说被某个对象拥有或者包含
function foo() {
console.log(this.a)
}
var obj1 = {
a: 2,
foo: foo
}
var obj2 = {
a: 1,
obj1: obj1
}
obj2.obj1.foo() // 2
当foo()被调用时，JavaScript是静态作用域类型，foo函数定义的位置是obj1，隐式绑定规则会把函数调用中的this绑定到这个上下文对象。
对象属性引用链中只有最顶层或者说最后一层会影响调用位置。
注意：隐式丢失
常见的this绑定问题就是“隐式绑定”的函数会丢失绑定对象，也就是“默认绑定”，从而把this绑定到全局对象（严格模式下为undefined）
var a = 'foo'
function foo() {
console.log(this.a)
}
var obj = {
a: 2,
foo: foo
}
var bar = obj.foo
bar() // foo
虽然bar是obj.foo的一个引用，但是实际上，它应用的是foo函数本身，因此此时的bar()其实是不带任何修饰的函数调用，因此应用了默认绑定。
var a = 'foo'
function foo() {
console.log(this.a)
}
function doFoo(fn) {
fn()
}
var obj = {
a: 2,
foo: foo
}
doFoo(obj.foo) // foo
setTimeout(obj.foo, 100)
参数传递其实就是一种隐式赋值，因此传入函数式会被隐式赋值
3、显式绑定
（1）call、apply
（2）硬绑定
function foo() {
console.log(this.a)
}
var obj = {a: 2}
var bar = function() {
foo.call(obj)
}
bar() // 2
setTimeout(bar, 1000) // 2
bar.call(window) // 2
创建了函数bar()，在其内部手动调用了foo.call(obj)，因此强制把foo的this绑定到了obj上。无论之后如何调用函数bar，总会手动在obj上调用foo。
这种显式的强制绑定，成为“硬绑定”
4、new绑定
new调用函数会自动执行下面操作：
（1）创建（或者说是构造）一个全新的对象
（2）这个新对象会被执行[[原型]]连接
（3）这个新对象会绑定到函数调用的this
（4）如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象
优先级
了解函数调用中this绑定的四条规则，需要做的就是找到函数的调用位置并判断对象哪条规则
1、函数是否是new绑定？如果是，this绑定的是新创建的对象
var bar = new Foo()
2、函数是否通过call、appy显式绑定或硬绑定？如果是，this绑定的是那个上下文对象
var bar = foo.call(obj)
3、函数是否在某个上下文对象中隐式调用？如果是，this绑定的是哪个上下文对象
var bar = obj.foo()
4、上述全不是，则使用默认绑定规则，如果在严格模式下，就绑定到undefined，否则绑定到全局对象
var bar = foo()
绑定this的注意点
1、忽略this
把null和undefined作为this的绑定对象传入call、apply、bind，调用时会被忽略，实际应用的是默认绑定规则
function foo() {
console.log(this.a)
}
var a = 1
foo.call(null, 2) // 1
foo.apply(null, [3]) // 1
2、间接引用
function foo() {
console.log(this.a)
}
var a = 2
var o = {a: 3, foo: foo}
var p = {a: 4}
o.foo() // 3
(p.foo = o.foo)() // 2,间接引用
var pfoo = o.foo
pfoo() // 2 隐式丢失
3、ES6箭头函数
箭头函数不使用this的四种标准规则，而是根据外层（函数或全局）作用域来决定this
箭头函数的绑定无法被修改。常用于回调函数中，如事件处理器或定时器。
function foo() {
setTimeout(() => {
console.log(this.a)
}, 100)
}
var obj = {a: 2}
foo.call(obj) // 2
详解如何确定this
1、（隐式绑定）如果某个对象中某个成员是function，当从这个对象上调用这个方法时，this指向当前对象
var FenFei = {
firstname:"li",
lastname:"gang",
timeTravel:function(year){
console.log(this.firstname + " " + this.lastname + " is time traveling to " + year);
}
}
FenFei.timeTravel(2014) //li gang is time traveling to 2014（父/拥有者对象：FenFei）
2、（隐式绑定）可以通过创建一个对象，来引用FenFei对象上的timerTravel方法
var Camile = {
firstname:"li",
lastname:"yunxia"
}
Camile.timeTravel = FenFei.timeTravel;
Camile.timeTravel(2014); //li yunxia is time traveling to 2014（父/拥有者对象：Camile）
3、（隐式丢失）使用变量保存FenFei.timeTravel方法的引用
var getTimeTravel = FenFei.timeTravel
getTimeTravel(2014) // undefined undefined is time traveling to 2014 (父/拥有对象： window；window对象里并没有firstName和lastName属性)
注意：谨记方法中的this将指向调用它的那个父/拥有者对象！无论何时被调用，我们必须看方括号或者是圆括号左边紧邻的位置，如果我们看到一个引用（reference），那么传到function里面的this值就是指向这个方法所属于的那个对象，要不然就是指向全局对象，或严格模式下的undefined
4、异步调用的方法内部的this
<button id='async'>点击我</button>
var btnDom = document.getElementById('async')
btnDom.addEventListener('click', FenFei.timeTravel)
// undefined undefined is time traveling to [Object MouseEvent](父/拥有对象: button)
btnDom.addEventListener('click', function(e) {
FenFei.timeTravel(2014)
})
//li gang is time traveling to 2014（父/拥有者对象：FenFei）
5、（new绑定）构造函数里的this
当使用构造函数创建一个对象的实例时，构造函数里的this就是新建的实例
var TimeTravel = function(fName, lName) {
this.firstName = fName
this.lastName = lName
}
var FenFei = new TimeTravel('li', 'gang')
console.log(FenFei.firstName, FenFei.lastNmae) // li gang
6、（显式绑定）call和apply方法设定this的值
var Campile = {
firstName: 'li',
lastName: 'yunxia'
}
FenFei.timeTravel.call(Camile,2014); //li yunxia is time traveling to 2014（指定this对象为Camile）
FenFei.timeTravel.apply(Camile,[2014]); //li yunxia is time traveling to 2014（指定this对象为Camile）
7、（显式绑定）bind将函数邦定至某个对象（ES5）
function f(y) {
return this.x + y
}
var o = {x: 1}
var g = f.bind(o)
g(2) // 3
f.bind(0)返回的是一个新函数，调用g(2)会把原始的函数f()当做o的方法来调用
8、补充，ES5之前模拟bind方法
function myBind(f, o) {
if(f.bind) {
return f.bind(o)
} else {
return function() {
f.apply(o, arguments)
}
}
}
bind的作用和apply、call类似都是改变函数的execute context，也就是runtime时this关键字的指向。但是使用方法略有不同。一个函数进行bind后可稍后执行。
补充
1、使用new为函数创建多个实例的时候，这些实例会共享prototype
当在一个实例你直接给this添加属性时，会隐藏prototype中与之同名的属性。
如果先访问prototype中的属性而不是自己设定的属性值，
（1）删除实例自己添加的属性，delete实例名.属性名
（2）直接访问prototype中的属性，xx.prototype.name
function Thing() {}
Thing.prototype.name = 'jack'
Thing.prototype.getName = function() {
console.log(this.name)
}
Thing.prototype.setName = function() {
this.name = 'marry'
}
Thing.prototype.deleteName = function() {
delete this.name
}
var thing = new Thing()
thing.setName()
thing.getName() //marry
thing.deleteName()
thing.getName() //jack
2、柯里化
在接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，如果其他的参数是必要的，返回接受余下的参数并返回结果的新函数
var sum = function(x, y) {
return x+y
}
var succ = sum.bind(null, 1)
succ(2) // 3
function f(y,z) {
return this.x + y + z
}
var g = f.bind({x:1}, 2)
g(3) // 6
网友评论