this指向性问题

this指向性问题

1. 默认绑定；window；独立调用也指向window；
2. 隐式绑定： 对象调用 obj.foo() : 谁调用就指向谁；（会出现隐式丢失）
3. 显示绑定: call ,apply, bind obj1.call(obj2)
4. new 绑定规则

• 优先级： 4 > 3 > 2 > 1

• 默认绑定规则

<script>
    this === window // true
// 函数的独立调用
function test() {
    console.log(this === window) // true
}
test()
</script>

• 隐式绑定规则： 谁调用指向谁

// this指向是在函数执行时确认的
var obj = {
    foo: function() {
        console.log(this) // obj
        function test() {
            console.log(this) // window
        }
        test() //调用方式为  函数独立调用 
    }
}
obj.foo() // obj
//--------------------------------------------------------
var a = 0
function foo() {
    console.log(this)
}
var obj = {
    a: 2,
    foo: foo
}
obj.foo() // obj
var bar = obj.foo
bar() // window

• 父函数可以决定子函数的this指向

// this指向是在函数执行时确认的
function foo() {
    console.log(this)
}
function bar(foo) {
    foo() // window
    // new foo()
    // foo.call(this)
}
var obj = {
	foo: foo
}
bar(obj.foo)

• 显示绑定规则大于隐式绑定

function foo() {
    console.log(this.a)
}
var obj1 = {
    a: 1,
    foo
}
var obj2 = {
    a: 2,
    foo
}
obj1.foo() //隐式绑定   a = 1
obj2.foo() //隐式绑定  a = 2
obj1.foo.call(obj2) // 显示绑定  a  = 2

• new的优先级高于显示绑定

function foo(b) {
    this.a = b
}
var obj1 = {}
var bar = foo.bind(obj1)// 将this指向为obj1
bar(2) // 则  obj1.a = 2
console.log(obj1.a) // 2
var baz = new bar(3) // new的优先级高于显示绑定，即 new bar()指向实例
console.log(obj1.a) // 2
console.log(baz.a) // 3

• 箭头函数内部无this，向上级作用域查找

var obj1 = {
    a: 1,
    foo: () => {
        console.log(this) //此时this指向window
    }
}
//-----------------------------------
function foo() {
    console.log(this)
    var test = () => {
     console.log(this)   
    }
    return test
}
var obj = {
	a: 1,
    foo
}
obj.foo()() // 默认绑定无效   此时 箭头函数this指向 obj

var bar = foo().call(obj2) // 显示绑定无效  此时绑定window