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关 ...
最新文章
- 百度搜索结果 转换_如何让图片出现在百度搜索结果里出现?
- html5数据提交到mysql,保存html5画布作为数据到mysql数据库
- 接口调试利器Postman
- spark.mllib:NaiveBayes
- Oracle手边常用70则脚本知识汇总
- 计算机软件名称用什么符号,[计算机软件及应用]第九章符号表.ppt
- 编译单元必须以 java_java中什么是编译单元
- L101 L201 ME35 ME350 SX235W EP-801A ME535 清零软件
- Visual Studio 要求导入 pfx 密钥以及导入后依然要求导入的解决办法
- 类申明 java,申明Java类必须使用的关键字是( )。
- 实用主义学python爬虫_麻瓜编程 实用主义学Python2018
- php 网站实例,php网站实例【货币问答】- php网站实例所有答案 - 联合货币
- erdas几何校正_erdas图像几何校正操作步骤指南
- 完全免费的Windows代码签名证书(大神勿喷)
- 【ERROR】Unable to open underlying table which is differently defined or of non-MyISAM type or ...
- 路由器与交换机知识总
- 云计算中的laaS、PaaS和SaaS是什么意思?
- 趣图:程序员先发现下雨了
- ToolStrip工具条
- UVA 10635 Prince and Princess
热门文章
- 写代码用什么笔记本_1—2千预算,编程、写代码、办公、PS修图笔记本推荐/选购指南...
- DVWA-CSRF-low级别
- 《Linux高性能服务器编程》——2.4 IP路由
- 微软Skype即将抛弃Windows Phone 8和8.1用户
- 【VMCloud云平台】SCOM配置(十五)-启用SCOM日志审计(ACS)
- 调用android自带的下载功能,进度在消息通知栏上显示
- Linux基础:linux网络接口
- 学习AJAX,解析XMLHttpRequest对象
- 隐藏右侧“快速启动栏”中的回收站图标及查看所有网站内容
- 《Look at Boundary: A Boundary-Aware Face Alignment Algorithm 》阅读笔记