JS中的this指向问题,以及this的作用

简介: this是作用域中的参数,因为常用到,在这里做一下总结。

1. this的概述

(1) 解析器在每次调用函数的时候都会向函数内部传递进一个隐含的参数,这个隐含的参数就是this;

(2) this指向的是一个对象,函数执行的上下文对象;

(3) 在这里我把this理解为一个操作这个函数执行的句柄(操作者),就像一个人(this)拿着锯子(函数)去锯木头(函数执行的上下文对象功能);

(4) 根据函数的调用方式的不同,this会指向不同的对象

varname='全局';
functionan(){
console.log(this);
}
an();  // 等同于 window.an(); 输出Window对象: Window {...}varobj= {
name:'周瑜',
do:an}
obj.do();  // 输出obj对象: {name: "周瑜", do: ƒ}varobj2= {
name:'小乔',
do:an}
obj2.do();  // 输出obj2对象: {name: "小乔", do: ƒ}

image.png

从上面的结果图可以看到,用obj和obj2调用do方法的时候,输出的this就是指向操作他们的句柄(操作者),obj和obj2;另外,在全局作用域中定义的变量和函数都会作为window的属性和方法保存,所以执行an(),等同于执行window.an(),this同样指向调用do方法的句柄window。

2. this的作用

现在假设我们有如下需求,有三个人要来公司上班,每个人都要打卡,在他们打卡的时候我需要获得他们每个人的名字。


这时候我分析了一下,三个人打卡,就是三个人或者更多人都做打卡这个操作,每个人都是一个独立不同的对象,都有自己的名字。


根据这个,我创建一个员工对象类,类中包含打卡这个方法,这里我将使用es6创建类的语法

classworker{
constructor(name) {
this.name=name  }
// 打卡record(){
console.log(this.name)
  }
}
letzhouyu=newworker('周瑜');
letxiaoqiao=newworker('小乔');
letdaqiao=newworker('大乔');
zhouyu.record();   // 周瑜xiaoqiao.record(); // 小乔daqiao.record();   // 大乔

image.png

如上面看到的,可以有任意多个人去打卡,只需要使用this,就可以直接获取打卡人的名字



目录
相关文章
|
9月前
|
JavaScript 前端开发
javascript中的this
javascript中的this
|
9月前
|
JavaScript
JS中改变this指向的六种方法
JS中改变this指向的六种方法
|
8月前
|
自然语言处理 JavaScript 前端开发
在JavaScript中,this关键字的行为可能会因函数的调用方式而异
【6月更文挑战第15天】JavaScript的`this`根据调用方式变化:非严格模式下直接调用时指向全局对象(浏览器为window),严格模式下为undefined。作为对象方法时,`this`指对象本身。用`new`调用构造函数时,`this`指新实例。`call`,`apply`,`bind`可显式设定`this`值。箭头函数和绑定方法有助于管理复杂场景中的`this`行为。
71 3
|
9月前
|
JavaScript 前端开发
js中改变this指向、动态指定函数 this 值的方法
js中改变this指向、动态指定函数 this 值的方法
|
7月前
|
JavaScript
js 【详解】函数中的 this 指向
js 【详解】函数中的 this 指向
65 0
|
7月前
|
JavaScript 前端开发
|
8月前
|
JavaScript
js -- 函数总结篇,函数提升、动态参数、剩余参数、箭头函数、this指向......
js -- 函数总结篇,函数提升、动态参数、剩余参数、箭头函数、this指向......
|
8月前
|
JavaScript 前端开发
JS中如何使用this方法
JS中如何使用this方法
35 0
|
9月前
|
自然语言处理 JavaScript 前端开发
在JavaScript中,this关键字的行为可能会因函数的调用方式而异
【5月更文挑战第9天】JavaScript中的`this`关键字行为取决于函数调用方式。在非严格模式下,直接调用函数时`this`指全局对象,严格模式下为`undefined`。作为对象方法调用时,`this`指向该对象。用`new`调用构造函数时,`this`指向新实例。通过`call`、`apply`、`bind`可手动设置`this`值。在回调和事件处理中,`this`可能不直观,箭头函数和绑定方法可帮助管理`this`的行为。
51 1
|
9月前
|
JavaScript 前端开发
深入探索JavaScript:如何改变this的指向
深入探索JavaScript:如何改变this的指向
78 2

热门文章

最新文章