JavaScript中this关键字的使用比较
JavaScript中this关键字的使用比较
this关键字在JavaScript中,用的不能说比较多,而是非常多。那么熟悉this关键字的各种用法则显得非常关键。
this有时候就是我们经常说的上下文,这个东西的指代对象。它灵活多变,有时候你看它是对象,有时候是window宿主对象。
1.this指向宿主对象
function myWindow() {this.id = 1; // 等价于window.id = 1console.log(this); // 这里的this就是window了console.log(this.id); // 1
}
myWindow();
这种情况比较普遍,也就是指向宿主对象的情况,在客户端是 window对象
在node里是 Global对象
第一个说,下面看第二种。
2.this指向调用函数的对象的时候
function myObj() {console.log(this.x); // 在这个例子里面是obj对象
}
var obj = {};
obj.x = "xx";
obj.myObj = myObj;
obj.myObj(); // xx
这里的myObj()函数里面的 this
指向的就是obj这个外部传递来的对象了。注意看 obj.myObj()
这里前面的 obj.
这里,因为myObj是obj这个对象的方法,下面obj作为对象调用了myObj这个函数,所以这里的this就是指向调用函数的对象了。
3.this指向构造函数生成的新对象的时候
// 作为构造函数的函数记得首字母要大写
function People(gender) { this.gender = gender;this.sayGender = function() {console.log(this.gender);}
}// 输出man,函数this是新的People{}对象
var girl = new People("women"); // 输出women,函数this是指向girl{gender:"women"}对象
girl.sayGender();
这里的执行过程理一下,首先 new People("man")
这句做了几件事情:
- 根据构造函数创建一个空的对象People{}
- 然后传递到People里面(这里才叫开始构造的过程,添砖加瓦的意思)
- 然后这里开始的函数里面的this就是指向传进来新的People{}对象了
这里就是构造函数生成对象的一个简单的过程了,可以自己模拟着执行以下。
4.this指向需要继承属性的对象的时候(apply和call)
function People(gender) { this.gender = gender;this.sayGender = function() {console.log(this.gender);}
}var sally = new People("women");var bob = { // bob是直接量创建的,但是没有sayGender方法可以用gender: "man";
}
所以这里如果bob要用 sayGender()
方法的话要怎么破呢?这个时候就要用到 apply()
或者 call()
了,这两个方法差不多。
- apply(obj, arguments) 这里的arguments是一个参数数组
- call(obj,argument) 这里没有复数
所以bob要调用 sayGender()
的话,就要用到 call()
方法或者 apply()
方法了。
这个其实可以理解为继承的一种,Java里面继承分为实现继承跟接口继承两种,JavaScript的继承是只有实现继承的,但是实现继承JavaScript里面又有很多种,比如原型链继承,还有这里的
apply()
和call()
也算是继承的一种。
function People(gender) { this.gender = gender;this.sayGender = function(str) {console.log(this.gender);}
}var sally = new People("women");var bob = { // bob是直接量创建的,但是没有sayGender方法可以用gender: "man";
}sally.sayGender("这是什么性别的?"); // 这是什么性别的?women
sally.sayGender.call(bob,"这是什么性别的?"); // 这是什么性别的?man
这里最后一句代码的执行过程分析下:
- 将bob{gender: “man”}这个对象传递到People里面
- 更改函数里面this指向
- 继续执行函数里面其他代码
这里可以看出,bob这个对象继承要继承另外一个对象的某个方法的时候可以用上面这种写法 function.call(obj, argument)
同时也可以知道,this在函数里面的指向其实是可以有很多种的,要根据不同的环境来判断。
下面开始apply的例子,在开始 apply()
的例子之前先普及一下基本知识:
首先普及下一个概念 类数组(array-like) ,类数组其实我们平时接触的很多的。比如函数里面的
arguments对象
,注意这里说的是arguments对象
而不是arguments数组
。因为arguments不是一个数组而是一个对象,只是我们平时用的时候喜欢用arguments[0]
这样的写法所以看起来像数组而已。类数组通常的定义就是 有维护一个length属性 和 可以根据数字下标来获取元素 比如arguments[0]
这样的一个对象。
不信的话我们可以测试下的:
function arrayLike() {console.log(arguments instaceof Array); // falseconsole.log(arguments instaceof Object); // true
}
arrayLike();
其实JavaScript里面的数组对象叫 关联数组 ,也就是我们数据库表那样的 键-值对 组成的形式。所以你如果以为JavaScript可以像其他语言那样优化循环比如
for(var i=0; i<100; i++)
这样的过程的话你就想多了。
甚至,JavaScript的对象内部实现也是 关联数组 ,比如你可以定义键为0而值为其他的对象。
var obj = {0: "12345"
}
var arr = ["12345"];
console.log(obj[0]); // 12345
console.log(arr[0]); // 12345
有没有觉得JavaScript内部的实现其实很简单?或者可以说原理基本上就一个,但是通过简单的加点属性减点属性让对象跟数组看起来完全不一样。其实内部的实现原理是一模一样的。
废话扯得有点多,下面看 apply()
方法的例子:
function People(gender) { this.gender = gender;this.sayGender = function() {var str = Array.prototype.join.call(arguments,""); // arguments为类数组console.log(str + this.gender); // }
}var sally = new People("women");var bob = {gender: "man"
}var textArr = "这是什么性别的?".split(""); // 这里将字符串分割为数组sally.sayGender.apply(bob, textArr); // 这是什么性别的?man
大概就到这里吧,有兴趣的可以留言讨论下。
转载于:https://www.cnblogs.com/manfredHu/p/4803993.html
JavaScript中this关键字的使用比较相关推荐
- 深入解析Javascript中this关键字的使用
深入解析Javascript中面向对象编程中的this关键字 在Javascript中this关键字代表函数运行时,自动生成的一个内部对象,只能在函数内部使用.比如: function TestFun ...
- php中this的使用技巧,JavaScript中this关键字使用方法详解
JavaScript中this关键字使用方法详解 在面向对象编程语言中,对于this关键字我们是非常熟悉的.比如C++.C#和Java等都提供了这个关键字,虽然在开始学习的时候觉得比较难,但只要理解了 ...
- JavaScript中this关键字使用方法详解
在面向对象编程语言中,对于this关键字我们是非常熟悉的.比如C++.C#和Java等都提供了这个关键字,虽然在开始学习的时候觉得比较难,但只要理解了,用起来是非常方便和意义确定的.JavaScrip ...
- Javascript中的关键字和保留字
ECMA-262 描述了一组具有特定用途的关键字.这些关键字可用于表示控制语句的开始或结束,或者用于执行特定操作等.按照规则,关键字也是语言保留的,不能用作标识符.以下就是ECMAScript的全部关 ...
- JavaScript中var关键字的使用详解
作用声明作用:如声明个变量. 语法 ? 1 var c = 1; 省略var在javascript中,若省略var关键字而直接赋值,那么这个变量为全局变量,哪怕是在function里定义的. ? 1 ...
- 针对还没搞懂javascript中this关键字的同学
本篇文章主要针对搞不清this指向的的同学们!不定期更新文章都是我学习过程中积累下的经验,还请大家多多关注我的文章以帮助更多的同学,不对的地方还望留言支持改进! 首先,必须搞清楚在JS里面,函数的几种 ...
- 对于JavaScript中this关键字的理解
这是我第二遍学this了,第一遍学的懵懵的.this指哪里都是凭我一个男人的直觉然后控制台输出看看对不对. 刚查了书.博客.视频.理解差不多了.毕竟菜鸡me: 一.首先介绍下什么是this this是 ...
- 前端基本功(三):javascript中让人脑壳疼的this关键字
javascript 的this关键字 1. this是什么 this是javascript中的关键字之一.他是使用对象自动生成的一个内部对象,只能在对象内部使用.它会根据上下文而进行变化,并且会在不 ...
- 图解javascript中this指向
JavaScript 是一种脚本语言,支持函数式编程.闭包.基于原型的继承等高级功能.JavaScript一开始看起来感觉会很容易入门,但是随着使用的深入,你会发JavaScript其实很难掌握,有些 ...
最新文章
- Solaris10下NDOUtils的安装
- TimeSpan 时间间隔
- 如何在客户端发送ajax请求,ajax - 从服务器(nodejs)发送数据到客户端(ajax请求)
- 监控j服务器jvm运行情况 - spring boot jvisualvm
- android 数字证书具体应用机制
- [python](爬虫)如何使用正确的姿势欣赏知乎的“长得好看是怎样一种体验呢?”问答中的相片...
- Spark Streaming(二)Flume
- 智伴机器人课文跟读哪里有_火了!智伴机器人竟然出现在2018年高考试卷
- java api 英文_教你查阅Java API 英文文档(JDK 11)
- Pycharm使用之设置代码字体大小和颜色主题
- Web前端工作笔记009---IE8兼容_new Date兼容方法
- 前端集合删除对象_【两万字】面试官:听说你精通集合源码,接我二十个问题!...
- ztree同级只显示一个节点
- 互联网这股裁员风,要吹到啥时候?
- 第三阶段应用层——1.2 数码相册—字符编码
- Tensorflow笔记4:Saver
- 互联网上的经济数据网站
- Redis——Redis入门和一些笔记
- autojs ui界面漂亮模板2
- 汇编程序语言 输入数字n和n个数字并对n个数字排序(带注释)