JS 里为什么会有 this

1、需求

假设我们有一个对象

var person = {
    name: 'Frank',
    age: 18,
    phone: '13812345678',
    sayHi: function(){
      // 待补充
    },
    sayBye: function(){
      // 待补充
    }
}

这个 person 对象有 name age 属性,还有一个 sayHi 方法,现在的需求是:

调用 person.sayHi(...) ,打印出「你好,我是 Frank,今年 18 岁」。
调用 person.sayBuy(...) ,打印出「再见,记得我叫 Frank 哦,想约我的话打电话给我,我的电话是 13812345678」

求就是这么简单,通过达成这个需求,我们就能理解 this 的本质。

2、方案

var person = {
    ...
    sayHi: function(name, age){
      console.log('你好,我是 ${name},今年 ${age} 岁')
    },
    sayBye: function(name, phone){
      console.log('再见,记得我叫 ${name} 哦,想约我的话打电话给我,我的电话是 ${phone}')
    }
}

调用方式是

person.sayHi(person.name, person.age)
person.sayBye(person.name, person.phone)

别急,我知道这代码很傻,接下来改进。

3、第一次改进

上面方法中,每次都要在调用的时候自行选择 person.name 作为参数,真的很傻,不如直接传入一个 person代码如下:

var person = {
    ...
    sayHi: function(self){
      console.log('你好,我是 ${self.name},今年 ${self.age} 岁')
    },
    sayBye: function(self){
      console.log('再见,记得我叫 ${self.name} 哦,想约我的话打电话给我,我的电话是 ${self.phone}')
    }
}

调用方式是

person.sayHi(person)
person.sayBye(person)

稍微好一点了,但是这代码依然很傻。
为什么不能把参数里的 person 省掉,变成 person.sayHi() 就好了。

4、加糖

开发者最想要的调用方式是 person.sayHi()那么问题来了,如果 person.sayHi() 没有实参,person.sayHi 函数是如何接收到 person 的呢?

  • 方法1:依然把第一个参数 self 当做 person,这样形参就会永远比实参多出一个 self
  • 方法2:隐藏 self,然后用关键字 this 来访问 self

JS 之父选择了方法2,用 this 访问 selfPython 之父选择了方法1,留下 self 作为第一个参数。

过程如下:

// 用 this 之前:
sayHi: function(self){
    console.log('你好,我是 ${self.name},今年 ${self.age} 岁')
}
// 用 this 之后:
sayHi: function(){
    // this 就是 self
    console.log('你好,我是 ${this.name},今年 ${this.age} 岁')
}

5、费解

用了 this 之后,完整代码如下:

var person = {
    name: 'Frank',
    age: 18,
    phone: '13812345678',
    sayHi: function(){
      console.log('你好,我是 ${this.name},今年 ${this.age} 岁')
    },
    sayBye: function(){
      console.log('再见,记得我叫 ${this.name} 哦,想约我的话打电话给我,我的电话是 ${this.phone}')
    }
}

现在轮到新手疑惑了,这个 this 到底是个啥玩意儿?从哪来的呀?

实际this 是隐藏的第一个形参。在你调用 person.sayHi() 时,这个 person 会「变成」 this

6、存在问题

很多 JS 高手不屑于用 this,觉得 this 不够单纯。所以 JS 之父给高手们准备了无糖的 .call 方法。

person.sayHi.call(person) 就等价于 person.sayHi()

.call 的第一个参数就是显式的 person,没有任何语法糖。

所以高手一般用 obj.fn.call(null,1,2,3) 来手动禁用 this

这样一来 person.sayHi.call 的参数其实可以是任何对象。

也就是说 person.sayHi 虽然是 person 的方法,但是是可以调用在任何对象上的。

7、对象与函数

JS 没有类没有方法,只有对象和函数。

JS 加了 class 关键字之后,勉强弄出来一个假的类。

this 是连接对象和函数的桥梁。

相比于 JS,我更喜欢 Python 的方式,不使用 this 关键字,而是使用 self 形参,更易懂。

到此这篇关于JS 里为什么会有 this的文章就介绍到这了,更多相关JS 里为什么会有 this内容请搜索QQwps.Com以前的文章或继续浏览下面的相关文章希望大家以后多多支持QQwps.Com!

猜你在找的JS 里为什么会有 this相关文章

华硕gtx770显卡怎么样?最近在购买显卡的时候,看了一款华硕gtx770显卡,想要知道这款显卡性能如何?下面我们就来看看gtx770显卡详细测评
这篇文章主要为大家详细介绍了Ajax校验用户名是否存在的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文讲主要解JavaScript各种继承方式和优缺点,文章将六种继承方式说明,分别有原型链继承、借用构造函数(经典继承)、组合继承、原型式继承、寄生式继承、 寄生组合式继承,这六种方式,需要的朋友可以参考一下
原神断浪长鳍给雷神用合适吗。原神这款游戏中经常会有一些可以白嫖的武器,断浪长鳍就是其中一个,2.2版本也是一起更新了这个武器,很多小伙伴在探讨这个武器能不能给雷神用,那么下面就一起
原神2.2版本什么时候开放预下载。喜欢原神的小伙伴们最近应该是非常激动的,原神即将更新2.2版本了,但是很多小伙伴还不知道什么时候可以更新,下面就跟着小编一起来看看原神2.2版本什
暗黑破坏神2重制版奶牛关怎么打?暗黑破坏神2重制版这款游戏中有一个叫做奶牛关的地方,这是玩家们的称呼,但是很多小伙伴可能还不是很清楚暗黑破坏神2重制版奶牛关怎么打,那么下面就跟着小
通过设置苹果手机可以实现双击截图,本文中介绍的则是iphone13promax手机设置双击截图的方法
iphone13pro是一款不错的智能手机,该手机有浅色和深色模式,深色模式适合在光线比较暗的地方,可以有效的保护眼睛,本文中介绍的是使用该手机开启深色模式的方法
vivox70pro+手机搭载的是骁龙888plus处理器,55W无线闪充以及专业影像芯片V1等,本文中介绍的是这款手机截长图的方法
共享打印机是在同一局域网中支持很多用户使用的打印机,本文中介绍的是在win11系统上安装这款打印机的方法