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

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

1. this的概述

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

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

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

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

var name = '全局';
function an(){
    console.log(this);
}
an();  // 等同于 window.an(); 输出Window对象: Window {...}

var obj = {
    name:'周瑜',
    do:an
}
obj.do();  // 输出obj对象: {name: "周瑜", do: ƒ}
var obj2 = {
    name:'小乔',
    do:an
}
obj2.do();  // 输出obj2对象: {name: "小乔", do: ƒ}

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

2. this的作用

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

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

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

class worker{
  constructor(name) {
    this.name = name
  }
  // 打卡
  record(){
    console.log(this.name)
  }
}
let zhouyu = new worker('周瑜');
let xiaoqiao = new worker('小乔');
let daqiao = new worker('大乔');

zhouyu.record();   // 周瑜
xiaoqiao.record(); // 小乔
daqiao.record();   // 大乔


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

  • 0
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值