纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

JS 里为什么会有 this JS 里为什么会有 this

方应杭   2021-10-11 我要评论
想了解JS 里为什么会有 this的相关内容吗方应杭在本文为您仔细讲解JS 里为什么会有 this的相关知识和一些Code实例欢迎阅读和指正我们先划重点:JS,里为什么会有,this,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 形参更易懂。


相关文章

猜您喜欢

  • Java 阻塞队列 Java并发编程之阻塞队列深入详解

    想了解Java并发编程之阻塞队列深入详解的相关内容吗春风~十一载在本文为您仔细讲解Java 阻塞队列的相关知识和一些Code实例欢迎阅读和指正我们先划重点:Java,阻塞队列,java,队列下面大家一起来学习吧。..
  • java工厂方法模式及抽象工厂验证 java开发的工厂方法模式及抽象工厂验证示例

    想了解java开发的工厂方法模式及抽象工厂验证示例的相关内容吗guoyp2126在本文为您仔细讲解java工厂方法模式及抽象工厂验证的相关知识和一些Code实例欢迎阅读和指正我们先划重点:java工厂方法模式及抽象工厂验证,java工厂方法模式,java抽象工厂验证下面大家一起来学习吧。..

网友评论

Copyright 2020 www.Shellfishsoft.com 【贝软下载站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式