【延伸学习】TS（JS） this的使用

最新推荐文章于 2024-03-26 11:14:20 发布

0zien0

最新推荐文章于 2024-03-26 11:14:20 发布

阅读量910

点赞数 6

分类专栏： CocosCreator引擎源码分析文章标签： javascript typescript this的使用 apply call

本文链接：https://blog.csdn.net/a42626423/article/details/135934587

版权

CocosCreator引擎源码分析专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文探讨了JavaScript中函数内部this的使用，特别是在new关键字、apply和call方法下的this指向变化。通过实例分析，强调避免将变量添加到全局this，而new操作会将变量作为对象成员，apply和call则能改变函数内部this的指向，用于对象继承时的便捷调用。

摘要由CSDN通过智能技术生成

一. 在函数内部使用this，然后直接调用方法：

this 
console.log("zien - 1")

function testFun(){
    this.azienTest = 1
}

testFun()
console.log("zien - 2")

上图1和图2分别是两个log位置断点this的截图。
可以看到，在图2里，变量azienTest已经添加到全局对象this中了。

如非必要，尽量别把东西添加到全局的this里面去，强烈不建议这样做。

二.在函数内部使用this，然后通过new一个对象来调用方法：

this 
console.log("zien - 1")

function testFun(){
    this.azienTest = 1
}

let obj = new testFun()
console.log("zien - 2")

图1是this的截图，图2是obj的截图。

可以看到这次通过new来创建一个testFun的对象时，变量azienTest并没有加入到全局对象this中，而是作为构造函数调用testFun，把变量azienTest作为obj的成员变量。

三.通过apply/call来调用：

function testFun(str1, str2){
    this.azienTest1 = str1
    this.azienTest2 = str2
}

let t1 = {}
testFun.apply(t1, ["t1_a", "t1_b"])


let t2 = {}
testFun.call(t2, "t2_a", "t2_b")

console.log("this = ", this.azienTest1, this.azienTest2)
console.log("t1 = ", t1.azienTest1, t1.azienTest2)
console.log("t2 = ", t2.azienTest1, t2.azienTest2)

其实这个才是我写这篇文章的目的…… 这两个方法对this的使用挺有意思的，感觉就是用testFun来调用apply或者call，然后传入一个this对象，接着就会改变了testFun绑定this的对象了，之前是绑定全局的this的，现在则是绑定传入的this对象。就是说在testFun内部，所有使用到this的对象都是指向传入的那个this。

从输出结果也可以看到，全局this并没有添加azienTest的成员变量，而t1和t2各自都添加上了自己的azienTest成员变量了。

另外，其实apply和call有啥区别其实我也还没弄懂……感觉就是传参形式不同……一个传入数组，另外一个传入可变长参数…………

最后，apply和call是Funtion.prototype里面包含的两个原型方法，在类的继承时，使用这两个方法可以很方便地继承父类的成员变量。