一直对Javascript中的this都有一种似是而非的感觉，今天突然感觉豁然开朗，特此记录一下。

咱们先看个栗子：
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>this的使用</title>
<script type="text/javascript">
var Car,tesla;
Car=function () {
this.start=function(){
console.log('car started');
};
this.turnKye=function () {
var carKey=document.getElementById('car_key');
carKey.onclick=function () {
this.start();
};
}
return this;
}
tesla=new Car();
tesla.turnKye();
</script>
</head>
<body>
<input type="button" id="car_key" value="test" />
</body>
</html>

咋一看这段代码没有什么问题，但是由于对于this的错误理解最终导致错误的结果。我们在元素car_key上面绑定了click事件，认为在car的类中嵌套绑定click事件就可以让这个dom元素访问car的this上下文。这种方式看起来很合理，但是不幸的是它并不工作。

在Javascript中，this关键字总是指向正执行的作用域的所有者。

　　请大家仔细揣摩上面那句话。正如我们所知，函数调用会产生新的作用域，鼠标点击时onclick事件被触发，this就指向了dom元素而不是Car的类。

　　那我们怎么做才会让它能正常工作呢？我们通常会把this赋值给一个局部的自由变量(比如that,_this,self,me等，这个在许多的框架里面都有体现）来避开作用域带来的问题。这里使用局部变量来重写之前的方法：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>this的使用</title>
</head>
<body>
<input type="button" id="car_key" value="test" />
<script type="text/javascript">
var Car,tesla;
Car=function () {
this.start=function(){
console.log('car started');
};
this.turnKye=function () {
var that=this;
var carKey=document.getElementById('car_key');
carKey.onclick=function () {
that.start();
};
}
return this;
}
tesla=new Car();
tesla.turnKye();
</script>
</body>
</html>

　　由于that是一个自由变量，onclick事件的出发并不会引起它的重新定义。

　 如果你熟悉ES6的话可以使用胖箭头符号，这更简洁和更容易理解，如下：
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>this的使用</title>
</head>
<body>
<input type="button" id="car_key" value="test" />
<script type="text/javascript">
var Car,tesla;
Car=function () {
this.start=function(){
console.log('car started');
};
this.turnKye=function () {
//var that=this;
var carKey=document.getElementById('car_key');
//carKey.onclick=function () {
// that.start();
//};
carKey.onclick=()=>this.start();
}
return this;
}
tesla=new Car();
tesla.turnKye();
</script>
</body>
</html>

当然我们也可以使用绑定函数的方法来解决这个问题：如下
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>this的使用</title>
</head>
<body>
<input type="button" id="car_key" value="test" />
<script type="text/javascript">
var Car,tesla;
Car=function () {
this.start=function(){
console.log('car started');
};
var click=function(){
this.start();
}
this.turnKye=function () {
//var that=this;
var carKey=document.getElementById('car_key');
carKey.onclick=click.bind(this);
}
return this;
}
tesla=new Car();
tesla.turnKye();
</script>
</body>
</html>

其实这些在学习React的时候，绑定事件的时候遇到的坑，那时候只知道这么写，不知道怎么回事，今天突然感觉豁然开朗。希望对大家有所帮助。

记录js学习之this用法的更多相关文章

  1. Ext JS学习第十六天 事件机制event（一） DotNet进阶系列(持续更新) 第一节：.Net版基于WebSocket的聊天室样例 第十五节：深入理解async和await的作用及各种适用场景和用法 第十五节：深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G

    code&monkey   Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...

  2. 我的three.js学习记录（二）

    通过上一篇文章我的three.js学习记录(一)基本上是入门了three.js,但是这不够3D,这次我希望能把之前做的demo弄出来,然后通过例子来分析操作步骤. 1. 示例 上图是之前做的一个dem ...

  3. 我的three.js学习记录（三）

    此次的亮点不是three.js的3d部分,而是通过调用摄像头然后通过摄像头的图像变化进行简单的判断后进行一些操作.上篇中我通过简单的示例分析来学习three.js,这次是通过上一篇的一些代码来与摄像头 ...

  4. vue.js学习记录

    vue.js学习记录 文章已同步我的github笔记https://github.com/ymblog/blog,欢迎大家加star~~ vue实例 生命周期 beforeCreate:不能访问thi ...

  5. [转]passport.js学习笔记

    概述 passport.js是Nodejs中的一个做登录验证的中间件,极其灵活和模块化,并且可与Express.Sails等Web框架无缝集成.Passport功能单一,即只能做登录验证,但非常强大, ...

  6. 【Knockout.js 学习体验之旅】（3）模板绑定

    本文是[Knockout.js 学习体验之旅]系列文章的第3篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

  7. 【Knockout.js 学习体验之旅】（1）ko初体验

    前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...

  8. js模块化开发——require.js学习总结

    1.为什么使用require.js 作为命名空间: 作为命名空间使用: 异步加载js,避免阻塞,提高性能: js通过require加载,不必写很多script 2.require.js的加载 requ ...

  9. JS中event.keyCode用法及keyCode对…

    js中event.keyCode用法及keyCode对照表 标签: javascriptJavaScriptJavascriptjavaScript 2012-12-11 15:11 HTML Jav ...

随机推荐

  1. Unity 相关经典博客资源总结(持续更新)

    就作为一个记录吧,把平时看过的Unity相关的一些好的Blog记录并分享. 好的论坛: Unity官方脚本  点评:这个不用说了,最核心的内容,理解整个Unity引擎的方方面面,梳理结构. Unity ...

  2. Android学习九：屏幕自适应

    android中不同手机分辨率适配问题 在项目开发的过程中,同一个布局对应不同的手机会显示出不同的效果.导致这个现象产生的原因是不同手机的分辨率不同.在android sdk提供的帮助文档中,我们可以 ...

  3. CSS 选择器(转)

    原文转自:http://www.cnblogs.com/xyzhanjiang/p/5447406.html CSS 选择器除了样式表匹配元素时需要用到,在使用 jQuery 等库的时候也可以利用 C ...

  4. #uwp# XMAL

    类型转换 在xaml中对属性赋值时,会将填入的字符串转换成对应的属性类型.比如: <Button Visibility="Visible" /> 会将Visible这个 ...

  5. LeetCode "Wiggle Subsequence" !

    Another interesting DP. Lesson learnt: how you define state is crucial.. 1. if DP[i] is defined as, ...

  6. Dephi 和 Pascal 的关系

    Pascal是一个有影响的面向对象和面向过程编程语言,由尼古拉斯·沃斯在1968年9月设计,在1970年发行,作为一个小型的和高效的语言,意图鼓励使用结构化编程和数据结构进行良好的编程实践. Delp ...

  7. SQL Server中可能为null的变量逻辑运算的时候要小心

    DECLARE @a int declare @b int IF(@a<>@b) print('@a<>@b') else print('@a=@b') ) print('b& ...

  8. 在IT行业换一个领域

    开发做了不到两个月,就不做了.原因是自己不喜欢开发,感觉开发的东西很麻烦.也许说到麻烦,很多人都要教训我了,干什么不麻烦.我也不想反驳什么,因为失败的次数太多了,反驳也无力. 从放弃开发开始到现在,抑 ...

  9. Oracle 记录插入时“Invalid parameter binding ”错误

    出现这种错误的原因可能有一下几种: 由于OracleParameter[] parameters:中parameters的个数和对应的插入SQL语句中的冒号个数不等: 参数个数和冒号个数相等,但是如下 ...

  10. 移动web开发，12个触摸及多点触摸事件常用Js插件

    如今移动互联网已经占据了主流地位,越来越多的开发者开始从桌面转向移动平台.与桌面开发不同的是,在移动领域中,不同的操作系统.大量不同屏幕尺寸的移动设备.触摸手势操作等,这都给开发者带来了一定的难度和挑 ...