首页 > 其他分享 >ES6中setTimeout函数的this

ES6中setTimeout函数的this

时间:2022-11-19 14:00:17浏览次数:76  
标签:myFunction ES6 函数 对象 call setTimeout id

在编程的过程中有同学遇到不太清楚ES6中​​this​​指向的问题,代码抽象如下:

function myFunction(){
var mthis = this;
setTimeout(()=>{
// this=mthis
console.log('setTimeout中的this:', this)
},100)
}

​this​​是什么,是全局上下文​​window​​吗?这里需要跟​​ES5​​区分一下。

ES6中箭头函数内部并没有 ​​this​​,​​this​​ 会作为变量一直向上级词法作用域查找,直至找到为止。

先看一下几个相关的知识

函数的调用

function myFunction(a, b){
return a * b;
}
myFunction(2, 3)

输出结果的是6

以上​​myFunction​​函数不属于任何对象。但是在 ​​JavaScript​​ 中,始终存在一种默认的全局对象。

在 HTML 中,默认全局对象是 HTML 页面本身,所有上面的函数“属于”HTML 页面。

在浏览器中,这个页面对象就是浏览器窗口。上面的函数自动成为一个窗口函数。

​myFunction()​​ 和 ​​window.myFunction()​​ 是同一个函数。

这是调用函数的常见方法,但并不是一个好习惯。

全局变量、方法或函数很容易在全局对象中产生命名冲突和漏洞。

this 关键词

在 ​​JavaScript​​ 中,被称为 ​​this​​ 的事物,指的是“拥有”当前代码的对象。

​this​​ 的值,在函数中使用时,是“拥有”该函数的对象。

请注意 ​​this​​ 并不是变量。它属于关键词。您无法改变 ​​this​​ 的值。

全局对象

作为函数调用函数

当不带拥有者对象调用对象时,​​this​​ 的值成为全局对象。

在 web 浏览器中,全局对象就是浏览器对象。

本例以 ​​this​​ 的值返回这个 window 对象:

示例

var x = myFunction(); // x 将成为 window 对象
function myFunction() {
return this;
}

调用一个函数作为一个全局函数,会导致 ​​this​​ 的值成为全局对象。

作为变量来使用 ​​window​​ 对象很容易使程序崩溃。

作为方法来调用函数

在 ​​JavaScript​​ 中,您可以把函数定义为对象方法。

下面的例子创建了一个对象(myObject),带有两个属性(firstName 和 lastName),以及一个方法(fullName):

示例

var myObject = {
firstName:"Bill",
lastName: "Gates",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
myObject.fullName(); // 将返回 "Bill Gates"

​fullName​​ 方法是一个函数。该函数属于对象。​​myObject​​ 是函数的拥有者。

被称为 ​​this​​ 的事物,是“拥有”这段 JavaScript 代码的对象。在此例中,​​this​​ 的值是 ​​myObject​​。

测试一下!修改这个 ​​fullName​​ 方法来返回 ​​this​​ 的值:

示例

var myObject = {
firstName:"Bill",
lastName: "Gates",
fullName: function () {
return this;
}
}
myObject.fullName(); // 将返回 [object Object](拥有者对象)

以对象方法来调用函数, ​​this​​ 的值指向对象本身。

通过构造器来调用函数

如果函数调用的前面是 ​​new​​ 关键字,那么这是一个构造函数调用。

它看起来像你创建一个新的函数,但由于 ​​JavaScript​​ 函数是对象,你实际上创建一个新对象:

示例

// 这是函数构造器:
function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName = arg2;
}

// 创建了一个新对象:
var x = new myFunction("Bill", "Gates");
x.firstName; // 会返回 "Bill"

构造器调用会创建新对象。新对象会从其构造器继承属性和方法。

构造器内的 ​​this​​ 会指向调用函数时创建的新对象。

setTimeout

(1)ES5

《javascript高级程序设计》中说:“超时调用的代码都是在全局作用域中执行的,因此函数中的this的值在非严格模式下指向window对象,在严格模式下是undefined”。这里讨论的是非严格模式。

​es5​​中​​setTimeout​​的延迟执行函数中的this,永远指向​​window​​。

举例来说:

function myFunction(){
var id=1024;
console.log('myFunction中的this:', this, this.id)
setTimeout(function(){
// 这里需要注意id和this.id是不一样的 this=window
console.log('setTimeout中的this:', this, this.id, id)
},100)
}
var myobj={
id:9528
}
var id=9527;
myFunction(myobj)
myFunction.call({id:1987})

输出结果:

​myFunction(myobj)​​执行结果

myFunction中的this: Window 9527

setTimeout中的this: Window 9527 1024

​myFunction.call({id:1987})​​执行结果

myFunction中的this: Object { id: 1987 } 1987

setTimeout中的this: Window 9527 1024

补充说明

一般而言​​this​​总是指向调用该方法的对象,但是使用​​call()​​和​​apply()​​方法时,就会改变​​this​​的指向,​​this​​的指向会发生转移。

call.(object, arg1, arg2 ...)

​apply()​​和​​call()​​差不多,只不过​​apply​​第二个参数必须传入的是一个数组,而​​call​​ 第二个参数可以是任意类型。

obj1.methodName.call(obj2, argument1, argument2)

如上,​​call​​的作用就是把​​obj1​​的方法放到​​obj2​​上使用,js中一切皆对象, 函数是对象, 函数也可以调用方法,后面的​​argument1..​​这些做为参数传入。

​A.call( B, x, y )​​:就是把A的函数放到B中运行,x 和 y 是A方法的参数。

用​​call​​来实现继承,用​​this​​可以继承myfunc1中的所有方法和属性。

(2)ES6

在​​ES6​​中,​​setTimeout​​里面,如果执行了一个箭头函数,那么这个函数的​​this​​指向的是外层调用者。

function myFunction(){
var id=1024;
console.log('myFunction中的this:', this, this.id)
setTimeout(()=>{
// 这里需要注意id和this.id是不一样的 this=myFunction的调用者
console.log('setTimeout中的this:', this, this.id, id)
},100)
}
var myobj={
id:9528
}
var id=9527;
myFunction(myobj)
myFunction.call({id:1987})

输出结果:

​myFunction(myobj)​​执行结果

myFunction中的this: Window 9527

setTimeout中的this: Window 9527 1024

​myFunction.call({id:1987})​​执行结果

myFunction中的this: Object { id: 1987 } 1987

setTimeout中的this: Object { id: 1987 } 1987 1024

​ES6​​中箭头函数​​this​​ 会作为变量一直向上级词法作用域查找,直至找到为止。于是这里箭头函数里面的​​this​​,向上找就是​​myFunction​​函数的​​this​​,在这里就是​​{id:1987}​​这个对象。

下面是 Babel 转箭头函数产生的 ES5 代码,就能清楚地说明​​this​​的指向。

// ES6
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
}

// ES5
function foo() {
var _this = this;

setTimeout(function () {
console.log('id:', _this.id);
}, 100);
}

上面代码中,转换后的 ES5 版本清楚地说明了,箭头函数里面根本没有自己的​​this​​,而是引用外层的​​this​​。

除了​​this​​,以下三个变量在箭头函数之中也是不存在的,指向外层函数的对应变量:​​arguments​​、​​super​​、​​new.target​​。

参考

​https://www.w3school.com.cn/js/js_function_call.asp​​ JavaScript 函数 Call

​https://es6.ruanyifeng.com/?search=this&x=0&y=0#docs/function#%E4%BD%BF%E7%94%A8%E6%B3%A8%E6%84%8F%E7%82%B9​

标签:myFunction,ES6,函数,对象,call,setTimeout,id
From: https://blog.51cto.com/u_15747188/5870405

相关文章

  • ES6中setTimeout函数的this
    在编程的过程中有同学遇到不太清楚ES6中this指向的问题,代码抽象如下:functionmyFunction(){varmthis=this; setTimeout(()=>{//this=mthiscons......
  • Python匿名函数和全部内置函数详细认识(下篇)
    ......
  • 70:函数也是对象_内存分析
    ###函数也是对象,内存底层分析Python中,“一切都是对象”。实际上,执行def定义函数后,系统就创建了相应的函数对象。我们执行如下程序,然后进行解释:defprint_star():......
  • 67:函数的基本概念_内存分析_函数的分类_定义和调用
    ###函数简介###函数的基本概念1.一个程序由一个个任务组成;函数就是代表一个任务或者一个功能。2.函数是代码复用的通用机制。###Python函数的分类Python中函数分为......
  • Python全部内置函数详细认识(中篇)
    ......
  • C语言中函数形参与实参的区别
    众所周知一个函数有两种参数,即形参和实参。那么究竟什么是形参什么是实参呢?形参:在定义函数时指定的参数,在未出现函数调用时,他们并不占用内存中的存储单元。只有在发生函数调......
  • 箭头函数与普通函数的区别、浏览器解析html的过程
    箭头函数与普通函数1.书写方式不同,箭头函数使用箭头定义,普通函数使用关键字 2.this指向不同:箭头:2.11箭头函数本身没有prototype,所以没有自己的this,2.21它的this只能......
  • 函数式编程
    函数式编程函数是一等公民,函数式的思想来源于数学运算,而柯里化的操作可以将多参函数转为单参函数,而单参函数一般希望是纯函数(即不存在副作用的函数),可以实现f(g(x))这样......
  • ES6之 ...扩展运算符
    <script>//『...』扩展运算符能将『数组』转换为逗号分隔的『参数序列』//声明一个数组...consttfboys=['易烊千玺','王源','王俊......
  • ES6之rest参数
     (1)//ES6引入rest参数,用于获取函数的实参,用来代替arguments//ES5获取实参的方式functiondate(){console.log(arguments);......