js能力提高(二) this指向

最新推荐文章于 2024-11-28 15:37:50 发布

翟敏1201

最新推荐文章于 2024-11-28 15:37:50 发布

阅读量116

点赞数

分类专栏： node

本文链接：https://blog.youkuaiyun.com/chaitong2204/article/details/99854993

版权

node 专栏收录该内容

9 篇文章

订阅专栏

本文深入探讨了JavaScript中this关键字的指向问题，解释了在不同执行上下文中的this指向变化，包括构造函数、对象方法、普通函数及使用call、apply、bind改变this指向的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

this的指向问题对于很多初学者来说会有一点点的难度。当我们理解之后就发现，其实它很简单。

this要在执行时才能确认值，定义时无法确认。

来说会有一点点的难度。当我们理解之后就发现，其实它很简单，

1.this指向。

var a = {
  name: "FF",
  fn: function() {
    console.log(this.name);
    
  }
}
a.fn() //   this => a
a.fn.call({name: "NN"}) // this => {name: "NN"}
var fn1 = a.fn()
fn1() // this => window

2.this常用的执行场景

作为构造函数执行
作为对象属性执行
作为普通函数执行
call apply bind

1.
function Foo (name) {
  this.name = name;
}
var f = new Foo("xiaoming")

2.
var obj = {
  name: 'A',
  printName: function () {
    console.log(this.name);
    
  }
}
obj.printName()

3.
function fn() {
  console.log(this); // 指向window
}
fn()

4.
function fn1 (name) {
  console.log(this,'this') // call 改变this的指向，指向{x:100}
  console.log(name,'name');
  
}
fn1.call({x:100},'zhaimin')

function fn2 (name,age) {
  console.log(this,'this') // call 改变this的指向，指向{x:100}
  console.log(name,'name');
  console.log(this.x);
  
  
}
fn1.apply({x:100},['zhaimin',16])

var fn3 = function (name) {
  console.log(name)
  console.log(this,'this')  
}.bind({Y:200})  // bind改变this指向
fn3("zhaimin")