最近一直在看js关于面向对象编程方面的东西,那么this肯定是需要一个被吃透 理解 同时灵活运用的对象

现在总结一下自己的学习成果:

我们可以用一句很形象的话来理解什么是this关键字?

"this关键字引用的是 包含它的那个函数 作为某个对象的方法 被调用时所属的那个对象",this会根据周围的环境改变而改变

这句话我用几个空格隔开分开作为理解的标准,下面引入一个实例,具体分析这句话的含义

var sound='Roar!';
function myOrneryBeast(){
alert(this);
this.style.color='green';//this指代的是window对象
alert(sound);
}

如果我们运行这段代码会发现this在火狐下会提示指向window对象,这是为什么?

我们对照上面的话一句句分析:

this关键字引用的是 包含它的那个函数(myOrneryBeast) 作为某个对象的方法(我们默认没有注明的函数全是在window对象下的) 被调用时所属的那个对象(myOrneryBeast)。

如果不信你运行window.myOrneryBeast()和执行myOrneryBeast()是一个效果,这样子就证明了myOrneryBeast()是window对象下的一个方法。

但是这句话其实接着执行到 this.style.color='green';//this指代的是window对象时会报错,因为this指向了window对象而window对象并没有style属性,所以会报错!

但是我们知道this的环境可以随着函数被赋值给不同的对象而改变,所以看下面这段代码

var sound='Roar!';
function myOrneryBeast(){
alert(this);
this.style.color='green';//this指代的是window对象
alert(sound);
}
window.onload=function(){
document.getElementById("a").onclick=myOrneryBeast;
}

html页面结构很简单一句话:<p id="a">js</p>

那么此时我们接着运行代码会发现此时火狐下的this对象指向了html的p元素

我们继续分析之前那句话看为什么会发生这种变化:

this关键字引用的是 包含它的那个函数(onclick) 作为某个对象(p)的方法 被调用时所属的那个对象(p),

此处要注意一个问题

window.onload=function(){
document.getElementById("a").onclick=myOrneryBeast;
//这一句会正常执行,因为可以将它理解为onclick方法引用了myOrneryBeast方法,更直接的可以理解为创建了一个名为onlick的函数,而这个函数就是myOrneryBeast,那么此时的this的引用是:包含它的那个函数(onclick),作为某个对象的方法(p),被调用时所属的那个对象(p);
/*细致的分析*/
/*document.getElementById("a").onclick=function(){
myOrneryBeast();
//这样子写会报错,表面上看貌似是this应该只想当前html对象,但是实际
这句话只是执行了myOrneryBeast函数,那么他的this对象仍然指向window;
}*/
}

所以在此我相信我已经把this解释的很清楚了!

那么在this中有个高级应用,是我接下来要说的,如果去自主修改this的环境指向,可以通过call()和apply()方法

请看下面这段代码

function doubleCheck(){
this.msg='Are you sure you want to leave?';
}/*创建一个构造函数*/
doubleCheck.prototype.sayGoodbye=function(){
return confirm(this.msg);
}/*构造函数的一个公共方法*/
var clickedLink=new doubleCheck();
var links=document.getElementsByTagName('a');
for(var i=0;i<links.length;i++){
links[i].onclick= clickedLink.sayGoodbye;
}
}

我们希望的运行结果就是每次通过点击a链接,都能触发一个名为'Are you sure you want to leave?'的弹窗事件,但是如果你照这么写肯定会事与愿违,因为通过前面的讲解,我们应该清楚此时的this应该指向的是html中的a对象,如果还不清楚,请回看上面内容!!

但是我们实际希望的是this指向doubleCheck对象,那么这时候我们就可以通过call()方法和apply()方法来实现this环境的改变

格式为clickedLink.sayGoodbye.apply(clickedLink)<==>等价于clickedLink.sayGoodbye.call(clickedLink);

二者的区别在于函数参数的设置方法,一个是依次写出(call),并跟在第二参数之后,一个是写成数组形式(apply),传入第二参数,推荐使用后者,因为可以使用arguments对象作为传参方式

最新文章

  1. java十进制转十六进制
  2. Parse_ini_file
  3. linux下的定时任务
  4. MySQL数据库优化技术之SQL语句慢查询定位
  5. db2相关问题及解决方法
  6. hdu 1423
  7. 菜单类(CCMenu,CCMenuItem)
  8. Android软键盘弹出时布局问题
  9. JAVA学习之动态代理
  10. 【2017-04-01】JS字符串的操作、时间日期的操作、函数、事件、动画基础
  11. ASP.NET Core WebApi 返回统一格式参数(Json 中 Null 替换为空字符串)
  12. python——常用模块
  13. VUE之图表操作
  14. JavaScript初学者必看“this”
  15. Codeforces 706C - Hard problem - [DP]
  16. ASP.NET Core 使用外部登陆提供程序登陆的流程,以及身份认证的流程 (转载)
  17. 工具函数判断data为整型字符串
  18. zouxy09-图像卷积与滤波的一些知识点
  19. win开启远程链接(可以被连接)
  20. MultipleRegularExpressionAttribute MVC中扩展自定义验证规则

热门文章

  1. Open Replicator
  2. C# DropDownList绑定文件夹
  3. javascript模式——Facade
  4. javascript 手机号抽奖
  5. (Qt 翻译) QGLAbstractScene
  6. SVN提交出现“&lt; &lt; &lt; &lt; &lt; &lt; &lt; .mine’无效,路径中具有非法字符”的问题
  7. 容易上手-类似ERP系统 简单特效
  8. @Html.ActionLink 添加样式 html标签
  9. WebView cookies清理
  10. 在linux下读取bmp文件头的完整代码。