面对对象(三)this 关键字

数字中国
• 阅读 677

涵义
实质
使用场合
使用注意点
避免多层 this
避免数组处理方法中的 this
避免回调函数中的 this
绑定 this 的方法
Function.prototype.call()
Function.prototype.apply()
Function.prototype.bind()
参考链接

1.涵义
this就是属性或方法“当前”所在的对象。
只要函数被赋给另一个变量,this的指向就会变。

var A = {
name: '张三',
describe: function () {

return '姓名:'+ this.name;

}
};

var name = '李四';
var f = A.describe;
f() // "姓名:李四"
上面代码中,A.describe被赋值给变量f,内部的this就会指向f运行时所在的对象(本例是顶层对象)。

再看一个网页编程的例子。

<input type="text" name="age" size=3 onChange="validate(this, 18, 99);">

<script>
function validate(obj, lowval, hival){
if ((obj.value < lowval) || (obj.value > hival))

console.log('Invalid Value!');

}
</script>
上面代码是一个文本输入框,每当用户输入一个值,就会调用onChange回调函数,验证这个值是否在指定范围。浏览器会向回调函数传入当前对象,因此this就代表传入当前对象(即文本框),然后就可以从this.value上面读到用户的输入值。
2.实质

JavaScript 语言之所以有 this 的设计,跟内存里面的数据结构有关系。

var obj = { foo: 5 };
上面的代码将一个对象赋值给变量obj。JavaScript 引擎会先在内存里面,生成一个对象{ foo: 5 },然后把这个对象的内存地址赋值给变量obj。也就是说,变量obj是一个地址(reference)。后面如果要读取obj.foo,引擎先从obj拿到内存地址,然后再从该地址读出原始的对象,返回它的foo属性。

2.1属性结构保存
原始的对象以字典结构保存,每一个属性名都对应一个属性描述对象。举例来说,上面例子的foo属性,实际上是以下面的形式保存的。

{
foo: {

[[value]]: 5
[[writable]]: true
[[enumerable]]: true
[[configurable]]: true

}
}
注意,foo属性的值保存在属性描述对象的value属性里面。

var obj = { foo: function () {} };
这时,引擎会将函数单独保存在内存中,然后再将函数的地址赋值给foo属性的value属性。

{
foo: {

[[value]]: 函数的地址
...

}
}

2.2函数的this
this,它的设计目的就是在函数体内部,指代函数当前的运行环境。

3.使用场合
(1)全局环境
只要是在全局环境下运行,this就是指顶层对象window
(2)构造函数
构造函数中的this,指的是实例对象
由于this指向实例对象,所以在构造函数内部定义this.p,就相当于定义实例对象有一个p属性
(3)对象的方法
如果对象的方法里面包含this,this的指向就是方法运行时所在的对象。该方法赋值给另一个对象,就会改变this的指向

4.使用注意点
5.避免多层 this
6.避免数组处理方法中的 this
7.避免回调函数中的 this
8.绑定 this 的方法
Function.prototype.call()
Function.prototype.apply()
Function.prototype.bind()
9.参考链接

this.property

点赞
收藏
评论区
推荐文章
待兔 待兔
1年前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Karen110 Karen110
4年前
一篇文章带你了解JavaScript this关键字
与其他语言相比,this关键字在JavaScript中的行为略有不同。JavaScript中,this关键字引用其所属的对象。根据使用位置,它具有不同的值。一、前言方法中,this关键字引用其所属的对象。1.this指的是全局对象在函数中。2.this引用全局对象在函数中。3.在严格模式下,this是未定义的在事件中。4.
LinMeng LinMeng
4年前
js 的 forEach,map,filter,some,every,find(es6),reduce详解
forEach()定义和用法forEach()方法用于调用数组的每个元素,并将元素传递给回调函数注意:forEach()对于空数组是不会执行回调函数的。语法array.forEach(function(currentValue,index,arr),thisValue)参数function(currentValue,index,a
住儿 住儿
2年前
JS的一些优雅写法
JS的一些优雅写法reduce1、可以使用reduce方法来实现对象数组中根据某一key值求和例如,假设有以下对象数组:constarr其中,reduce方法的第一个参数是一个回调函数,它接收两个参数:累加器(acc)和当前元素(cur)。回调函数的返回值
Souleigh ✨ Souleigh ✨
4年前
前端性能优化 - 雅虎军规
无论是在工作中,还是在面试中,web前端性能的优化都是很重要的,那么我们进行优化需要从哪些方面入手呢?可以遵循雅虎的前端优化35条军规,这样对于优化有一个比较清晰的方向.35条军规1.尽量减少HTTP请求个数——须权衡2.使用CDN(内容分发网络)3.为文件头指定Expires或CacheControl,使内容具有缓存性。4.避免空的
Stella981 Stella981
3年前
React组件中的函数绑定this的几种方式
在React中使用class定义组件时如果不注意this的指向问题,会带来一些麻烦。绑定this主要有下面两种方法:1\.bind()在class中定义函数,然后在构造方法中使用bind()绑定当前的组件对象。classMyComponentextendsReact.Component{constr
Wesley13 Wesley13
3年前
Java核心技术读书笔记02
第四章对象和类类之间的关系最常见的三种关系1.依赖("usesa")Order依赖Account类看信息2.聚合("hasa")Order包含多个Item3.继承("isa")知识点:所有Java对象都存在堆中。GregorianCalendar类所包含的方法要比Date类多得多。public避免标记
Stella981 Stella981
3年前
JavaScript回调函数的高手指南
摘要:本文将会解释回调函数的概念,同时帮你区分两种回调:同步和异步。回调函数是每个前端程序员都应该知道的概念之一。回调可用于数组、计时器函数、promise、事件处理中。本文将会解释回调函数的概念,同时帮你区分两种回调:同步和异步。1.回调函数首先写一个向人打招呼的函数。只需要创建一个接受name参数的函数gree
Wesley13 Wesley13
3年前
Java并发编程(六)
  上一节已经讲到,使用Synchronzied代码块可以解决共享对象的竞争问题,其实还有其他的方法也可以避免资源竞争问题,我统称他们为Java同步块。Java同步块(synchronizedblock)用来标记方法或者代码块是同步的,可以避免资源竞争,避免死锁。。Java同步关键字(synchronized)J
Stella981 Stella981
3年前
25 个最基本的 JavaScript 面试问题及答案(上)
1.使用typeofbar"object"来确定bar是否是对象的潜在陷阱是什么?如何避免这个陷阱?尽管typeofbar"object"是检查bar是否对象的可靠方法,令人惊讶的是在JavaScript中null也被认为是对象!因此,令大多数开发人员惊讶的是,下面的代码将输出true(而不是f
Stella981 Stella981
3年前
JavaScript回调函数及数组方法测试
JavaScript回调函数及数组方法测试具体代码如下:<!DOCTYPEhtml<htmllang"en"<head<metacharset"GBK"<metahttpequiv"XUACompatible"content"ieedge
数字中国
数字中国
Lv1
我自饮酒醉世间,贪得红尘一场欢。
文章
3
粉丝
0
获赞
0