关于this指向的小例子

let obj = {
    fn: function () {
      console.log(this)
      let a = function () {
        console.log(this)
      }
      let b = ()=>{
        console.log(this)
      }
      a()
      b()
    }
  }
  obj.fn()
  let newFn = obj.fn
  newFn()

首先明确一点:this指向被调用者 ,比如a.b() ,a调用b,b方法里的this就指向a

执行obj.fn()时,obj调用fn方法,所以fn方法里的this指向obj 由此得出:

第一个this指向obj

第二个this(a方法里的this)a()实际是window.a() 是window在调用  所以指向window

第三个this(箭头函数里的this)由于箭头函数内没有this,即不需要调用者调用可以自执行,所以它内部的this会向父级查找,所以是obj

执行 let newFn = obj.fn; newFn便是一个方法,指向与obj.fn同地址的方法体

执行newFn() 实际是window.newFn() 所以newFn内的this指向window

所以里面的三个this都指向window

### ### JavaScript 中 `this` 关键字的指向规则详解 JavaScript 中的 `this` 是一个在函数执行时自动生成的关键字,其指向取决于函数的调用方式。与传统的面向对象语言(如 Java、C++)不同,JavaScript 的 `this` 并不绑定到类实例,而是根据运行上下文动态决定其指向[^1]。 #### 1. 全局环境中的 `this` 在全局作用域中使用 `this`,它会指向全局对象。在浏览器环境中,全局对象是 `window`;在 Node.js 环境中则是 `global`。例如: ```javascript var name = 'code'; console.log(this); // 指向 window 对象 console.log(this.name); // 输出 code console.log(window.name); // 输出 code ``` 这种情况下 `this` 始终指向全局对象[^3]。 #### 2. 函数中的 `this` 在普通函数中,`this` 的指向取决于函数被谁调用。如果函数作为对象的方法被调用,则 `this` 指向该对象;如果函数独立调用,则 `this` 指向全局对象(在非严格模式下),或 `undefined`(在严格模式下)。 示例: ```javascript var stu = { name: "张三", age: 23, play: function() { console.log("打篮球"); console.log(this); // {name: "张三", age: 23, play: ƒ} } }; stu.play(); // this 指向 stu 对象 ``` 若将方法赋值给变量并单独调用,`this` 将丢失原始上下文指向全局对象[^4]。 #### 3. 构造函数中的 `this` 当函数作为构造函数配合 `new` 使用时,`this` 会指向新创建的对象实例。构造函数内部通过 `this` 给新对象添加属性和方法。 示例: ```javascript function Person(name) { this.name = name; } var p = new Person("李四"); console.log(p.name); // 输出 李四 ``` 此时 `this` 指向新创建的 `p` 实例[^4]。 #### 4. 使用 `call()`、`apply()` 和 `bind()` 显式绑定 `this` 可以通过 `call()`、`apply()` 或 `bind()` 方法显式定函数执行时的 `this` 指向。这些方法允许开发者控制函数调用时的作用上下文。 示例: ```javascript let obj = { age: 10 }; function fn(x, y) { console.log(this); // 输出 { age: 10 } console.log(x + y); // 输出 7 } fn.apply(obj, [3, 4]); // apply 用于调用函数并this ``` `apply()` 和 `call()` 的区别在于参数传递形式:`call()` 需要逐个传入参数,而 `apply()` 接收一个参数数组[^5]。 #### 5. 箭头函数中的 `this` 箭头函数没有自己的 `this`,它继承外层作用域的 `this` 值。这种特性使得箭头函数非常适合用于嵌套结构中保持上下文一致性。 示例: ```javascript const obj = { value: 42, init: function() { setTimeout(() => { console.log(this.value); // 输出 42 }, 100); } }; obj.init(); ``` 在这个例子中,箭头函数内部的 `this` 继承自 `init` 方法的上下文,因此能正确访问 `obj.value`。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值