JavaScript中的this关键字
普通函数调用
function person(){this.name="xl";console.log(this);console.log(this.name); } person(); //输出 window xl
在这段代码中person函数作为普通函数调用,实际上person是作为全局对象window的一个方法来进行调用的,即window.person();所以这个地方是window对象调用了person方法,那么person函数当中的this即指window,同时window还拥有了另外一个属性name,值为xl.
var name="xl"; function person(){console.log(this.name); } person(); //输出 xl
同样这个地方person
作为window
的方法来调用,在代码的一开始定义了一个全局变量name
,值为xl
,它相当于window
的一个属性,即window.name="xl"
,又因为在调用person
的时候this
是指向window
的,因此这里会输出xl
.
作为方法调用
var name="XL"; var person={name:"xl",showName:function(){console.log(this.name);} } person.showName(); //输出 xl//这里是person对象调用showName方法,很显然this关键字是指向person对象的,所以会输出namevar showNameA=person.showName; showNameA(); //输出 XL //这里将person.showName方法赋给showNameA变量,此时showNameA变量相当于window对象的一个属性,因此showNameA()执行的时候相当于window.showNameA(),即window对象调用showNameA这个方法,所以this关键字指向window
另例
var personA={name:"xl",showName:function(){console.log(this.name);} } var personB={name:"XL",sayName:personA.showName }personB.sayName(); //输出 XL //虽然showName方法是在personA这个对象中定义,但是调用的时候却是在personB这个对象中调用,因此this对象指向
作为构造函数调用
function Person(name){this.name=name; } var personA=Person("xl"); console.log(personA.name); // 输出 undefined console.log(window.name);//输出 xl //上面代码没有进行new操作,相当于window对象调用Person("xl")方法,那么this指向window对象,并进行赋值操作window.name="xl".var personB=new Person("xl"); console.log(personB.name);// 输出 xl //这部分代码的解释见下
new操作符
//下面这段代码模拟了new操作符(实例化对象)的内部过程 function person(name){var o={};o.__proto__=Person.prototype; //原型继承 Person.call(o,name);return o; } var personB=person("xl");console.log(personB.name); // 输出 xl
在person里面首先创建一个空对象o,将o的proto指向Person.prototype完成对原型的属性和方法的继承
Person.call(o,name)这里即函数Person作为apply/call调用(具体内容下方),将Person对象里的this改为o,即完成了o.name=name操作
返回对象o。
因此`person("xl")`返回了一个继承了`Person.prototype`对象上的属性和方法,以及拥有`name`属性为"xl"的对象,并将它赋给变量`personB`.所以`console.log(personB.name)`会输出"xl"
call/apply方法的调用
在JS里函数也是对象,因此函数也有方法。从Function.prototype上继承到Function.prototype.call/Function.prototype.apply
方法
call/apply
方法最大的作用就是能改变this
关键字的指向.
Obj.method.apply(AnotherObj,arguments);
var name="XL"; var Person={name:"xl",showName:function(){console.log(this.name);} } Person.showName.call(); //输出 "XL" //这里call方法里面的第一个参数为空,默认指向window。 //虽然showName方法定义在Person对象里面,但是使用call方法后,将showName方法里面的this指向了window。因此最后会输出"XL";
funtion FruitA(n1,n2){this.n1=n1;this.n2=n2;this.change=function(x,y){this.n1=x;this.n2=y;} }var fruitA=new FruitA("cheery","banana"); var FruitB={n1:"apple",n2:"orange" }; fruitA.change.call(FruitB,"pear","peach");console.log(FruitB.n1); //输出 pear console.log(FruitB.n2);// 输出 peach
FruitB
调用fruitA
的change
方法,将fruitA
中的this
绑定到对象FruitB
上。
转载于:https://www.cnblogs.com/IceSnova/p/7183367.html
JavaScript中的this关键字相关推荐
- JavaScript中的“ this”关键字
JavaScript'this'关键字 (JavaScript 'this' keyword) The this keyword is widely used in JavaScript. It ha ...
- JavaScript中的“ new”关键字是什么?
最初遇到JavaScript时, new关键字可能会造成很大的混乱,因为人们倾向于认为JavaScript并非面向对象的编程语言. 它是什么? 它解决什么问题? 什么时候合适,什么时候不合适? #1楼 ...
- 深入理解JavaScript中的this关键字
在JavaScript中this变量是一个令人难以摸清的关键字,this可谓是非常强大,充分了解this的相关知识有助于我们在编写面向对象的JavaScript程序时能够游刃有余. 对于this变量最 ...
- 【转】JavaScript中的this关键字使用的四种调用模式
http://blog.csdn.net/itpinpai/article/details/51004266 this关键字 本意:这个.这里的意思. 在JavaScript中是指每一个方法或函数都会 ...
- 前端面试必会 | 一文读懂 JavaScript 中的 this 关键字
this 是一个令无数 JavaScript 编程者又爱又恨的知识点.它的重要性毋庸置疑,然而真正想掌握它却并非易事.希望本文可以帮助大家理解 this. JavaScript 中的 this Jav ...
- JavaScript中的This 关键字
This 关键字 重要的事情说三遍: 注:This指向哪个对象不取决于函数定义的位置,而取决于调用的位置 注:This指向哪个对象不取决于函数定义的位置,而取决于调用的位置 注:This指向哪个对象不 ...
- JavaScript中解析super关键字
虽互不曾谋面,但希望能和您成为笔尖下的朋友 以读书,技术,生活为主,偶尔撒点鸡汤 不作,不敷衍,意在真诚吐露,用心分享 点击左上方,可关注本刊 标星公众号(ID:itclanCoder) 如果不知道如 ...
- this调用语句必须是构造函数中的第一个可执行语句_谈谈JavaScript中的函数构造式和new关键字...
您是否曾困惑于 Javascript 中的new关键字呢?是否曾想理解关于 function 和 constructor 的区别是什么呢? 大多数 Javascript 的新开发者不太想要使用new关 ...
- 谈谈JavaScript中的function constructor和new关键字
您是否曾困惑于 Javascript 中的new关键字呢?是否曾想理解关于 function 和 constructor 的区别是什么呢? 大多数 Javascript 的新开发者不太想要使用new关 ...
最新文章
- crontab工具介绍
- ML之SVM:随机产生100个点,建立SVM模型,找出超平面方程
- NYOJ 5177 疯牛(最大化最小值 二分搜索)
- Android fragment源码全解析
- 初步认识Volatile-CPU层面的内存屏障
- linux下ftp服务阶段实验(3)
- 平面直角坐标系中的旋转公式_【数理之路】初中范围推导三角函数倍角正弦公式...
- 精通 Oracle+Python,第 4 部分:事务和大型对象
- tree(2018.10.26)
- 将Excel VBA封装成exe程序[老贴收藏]
- [转载] python无法从nltk中调取文本 from nltk.book import *
- Linux镜像最全版本下载网站
- 线性代数 向量 知识技巧思维导图 [21考研上岸之旅]
- 面试逻辑题 三个精灵说真话假话的判断难题
- xp系统从u盘启动计算机,一键u盘装xp系统,教您如何使用U盘装xp系统
- iOS 性能、架构、socket 小结
- 郑捷《机器学习算法原理与编程实践》学习笔记(第七章 预测技术与哲学)7.2 径向基网络...
- 冰蝎各版本工具分析与魔改思路
- Bat(批处理)文件编写手册(一)
- win10隐藏任务栏_win10系统任务栏彰显个性的设置方法