再学JS--this

this是什么？

对JavaScript中this存在的两种误解：

1. this指向函数本身
2. 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