this 解析

in js with 0 comment views: 480 times

this 指向最后调用它的对象

绑定规则

1、默认绑定(严格/非严格模式)

2、隐式绑定

3、new绑定

4、显式绑定

5、箭头函数绑定

function foo() {
  console.log(this.a)
}
let a = 1
foo()

const obj = {
  a: 2,
  foo: foo
}
obj.foo()

const c = new foo()
function a() {
  return () => {
    return () => {
      console.log(this)
    }
  }
}
console.log(a()()())
let a = { name: 'weber' }
function foo() {
  console.log(this.name)
}
foo.bind(a)() // => 'weber'

优先级

首先,new 的方式优先级最高,接下来是 bind 这些函数,然后是 obj.foo() 这种调用方式,最后是 foo 这种调用方式,同时,箭头函数的 this 一旦被绑定,就不会再被任何方式所改变。

image

例子

var name = "weber"
function f(){
    var name = "funWeber";
    
    console.log(this.name); // weber 
    
    console.log('fun-->>', this) // fun-->>Window
}

f(); 
console.log('window-->>',this) // window-->>Window

f() 执行时,调用者是全局对象 window ,相当于是 window.f()
严格模式下,f() 函数内的this 为undefined ,this.name 会报错 Uncaught TypeError: Cannot read property 'name' of undefined

var name = "weber";
var obj = {
    name: "objName",
    fun: function () {
        console.log(this.name); // objName
    }
}
obj.fun();

函数fun 最后是obj对象调用的,所以当前的this 就是 obj 对象,this.name 就是 objName

var name = "weber";
var obj = {
    name: "objName",
    fun: function () {
        console.log(this.name); // objName
    }
}
window.obj.fun();

最后调用它的对象仍然是对象 obj, 所以会打印objName

var name = "weber";
var obj = {
    fun: function () {
        console.log(this.name) // undefined
    }
}
window.obj.fun();

最后调用它的对象仍然是对象 obj, obj 对象里面并没有name 属性,所以打印的是undefined。
这个例子还是说明了:this 永远指向最后调用它的那个对象,因为最后调用 fn 的对象是 a,所以就算 a 中没有 name 这个属性,也不会继续向上一个对象寻找 this.name,而是直接输出 undefined。

var name = "weber";
var obj = {
    name: null,
    fun: function (){
        console.log(this.name) // weber
    }
}
var f = obj.fun;
f()

虽然将 obj 对象的方法 fun 赋值给了变量f,但是并没有调用。f() 仍然是在 window 下执行的,所以此时的this 指向还是window


var name = "weber"
function foo(){
    var name = "foo";
    boo();
    function boo(){
        console.log(this.name) // weber
    }
}
foo()

this 始终都是window

var name = "weber";
var obj = {
    name: "objName",
    fun1: function () {
        console.log(this.name)
    },
    fun2: function () {
        setTimeout(
            function(){
                this.fun1()
            }, 100
        )
    }
}
obj.fun2() // Uncaught TypeError: this.fun1 is not a function

匿名函数的 this 永远指向 window, 匿名函数没有名字,所以没法被其他对象调用,this 就是指向window


参考:

https://juejin.im/post/59bfe84351882531b730bac2

https://juejin.im/book/5bdc715fe51d454e755f75ef/section/5bdc715f6fb9a049c15ea4e0


Responses