js高级之｜this的指向

目录

this的四种绑定规则

绑定一：默认绑定

绑定二：隐式绑定

绑定三：显示绑定

绑定四：new绑定​​​​​​​

规则优先级

---

首先，this在全局作用域下指向window。

但是开发很少全局使用this，一般都在函数中使用。

最重要的是：this指向和函数中this所写的位置无关，与该函数调用的位置有关。

var obj = {
    foo(){
    console.log(this)//this指向与this定义时所在位置无关
    }
}
fn = obj.foo()
//与包含this的函数调用时的情况有关
obj.foo() //调用前有obj：this指向obj
fn()      //调用前无obj，指向整个全局作用域，即window  

this的四种绑定规则

• 绑定一：默认绑定
• 绑定二：隐式绑定
• 绑定三：显示绑定
• 绑定四：new绑定

绑定一：默认绑定

函数没有被绑定到某个对象上调用

var obj = {
    bar: function(){
    console.log(this);
    }
}
//疑难案例一
function foo(func){
    func()
}
foo(obj.bar);//输出为window
//疑难案例二
var fn = boj.bar;
fn();//输出为window

//两个案例都是令对象中函数调用时不使用obj.fn()，为默认绑定到window

绑定二：隐式绑定

通过对象发起的函数调用

function foo(){
    console.log(this);
}
 var obj1 = {
    name:"obj1",
    foo: foo
 }
 var obj2 = {
    name:"obj2",
    obj1:obj1
 }

obj2.obj1.foo() //结果是obj1 ： { name: 'obj1', foo: [Function: foo] }
//注意：多个对象联用，this指向最近的一个

绑定三：显示绑定

使用call和apply方法，二者区别为除了第一个相同的参数，后面的参数中apply为数组，call为参数列表。

fn.call("call",20,30,40)

fn.apply("apply",[20,30,40])

call和apply这两个函数的第一个参数都是一个对象，这个对象就是给this准备的。调用call和apply函数时，会将this绑定到这个对象上。

function foo(){
    console.log(this);
}
var obj = {
   name : "why"
}
foo.call(123)//[Number: 123]
foo.call(obj)//{ name: 'why' }

绑定四：new绑定

用new关键字把函数当作一个类的构造函数。

创建一个全新的对象，创建时新对象就会绑定到函数调用的this上。

function Person(name){
    console.log(this);//Person {}
    this.name = name;
}
var p = new Person("why");
console.log(p)//Person { name: 'why' }

规则优先级

顺序：new绑定>bind/call/apply>显示绑定>默认绑定