Javascript中this关键字的一些小知识


Posted in Javascript onMarch 15, 2015

Javascript应该是现在最流行的跨平台语言之一,一直在玩前端的一些有意思的东西,发现竟然没有掌握好这门语言。有点舍本逐末,于是想趁着现在这有空的时候好好补充一点遗漏的东西。

this的隐性绑定

一开始这是我很迷惑的东西,刚开始看到的时候,不理解。而后,在相似的情况下,又能用类似的方法解决同样的问题。便试着理清这其中的知识,方便于查找。

这是一个Javascript语言上设计的错误,但是似乎这个错误是不可避免的,函数是对象,数组是对象等等。引用《Javascript: The Good Parts》中的例子

function add (a,b) {return a+b}

 var sum = add (3,4);

 console.log(sum); //sum = 7

此时sum的结果是7。

 > typeof add

 > 'number'

在这里可以看到,add的类型是数值。

以此模式调用函数时,this被绑定到全局变量。
也就是在现在的环境下,我们可以这样调用this

 this.add(3,4)

这就是this的隐性绑定,而this会以不同的方式被绑定。
var hello = function (){

    return "Hello, " + this.name;

};

name = 'this';

console.log(hello());

这时我们就会得到Hello,this。而当
var hello = function (){

    return "Hello, " + this.name;

};

var user = {

    hello : hello,

    name : 'phodal',
};

console.log(user.hello());

这时user中的hello便指向了hello函数,而这在我们的理解中,这怎么可能,所以是个Bug。

如果我们在这个方法中定义一个变量并给它赋值this,那么内部函数就可以通过那个变量访问到this。

var that = this

于是当情况稍微复杂一点的时候我们就需要用到:

 vat that = this;

tips:

1.this变量的作用域总是由其最近的封闭函数所确定。
2.使用一个局部变量(如me,self,that)让this绑定对于内部是可用的。

一个简单的例子:

var M = function(){

    this.name = "M";

};
var MM = function(){

    z = new M();

    this.name = "MM";
    z.printName = function(){

        console.log(this.name);

    };

    return z.printName();

};
var mm = new MM;

这时的this指向的是M函数,而由MM自身。如果我们将M中的this去掉,那么返回的就是一个undefined。 于是我们就创建一个当前this作用域的别名,如that或者self等等:
var MM = function(){

    z = new M();

    this.name = "MM";

    var self = this;

    z.printName = function(){

        console.log(self.name);

    };

    return z.printName();

};

这样就能返回一个MM了。除此之外,在ES5中可以用回调函数的bind方法。

var MM = function(){

    z = new M();

    this.name = "MM";

    z.printName = function(){

        console.log(this.name);

    }.bind(this);

    return z.printName();

};

bind可以将方法绑定到接收者。

其他

又一个hello,world

在一次偶然的机会中遇到print('Hello')('World'),然后输出了'Hello, World'。

所谓的高阶函数,看上去似乎很有用,有兴趣可以看看下一篇。

Javascript 相关文章推荐
Mootools 1.2教程 设置和获取样式表属性
Sep 15 Javascript
JavaScript类和继承 prototype属性
Sep 03 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
Apr 02 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
Feb 24 Javascript
window.open()详解及浏览器兼容性问题示例探讨
May 29 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
Jul 17 Javascript
总结JavaScript设计模式编程中的享元模式使用
May 21 Javascript
BootStrap Tooltip插件源码解析
Dec 27 Javascript
基于原生js运动方式关键点的总结(推荐)
Oct 01 Javascript
angular 内存溢出的问题解决
Jul 12 Javascript
通过说明与示例了解js五种设计模式
Jun 17 Javascript
简单了解JavaScript中的执行上下文和堆栈
Jun 24 Javascript
Javascript URI 解析介绍
Mar 15 #Javascript
PHP+jQuery+Ajax实现多图片上传效果
Mar 14 #Javascript
jQuery oLoader实现的加载图片和页面效果
Mar 14 #Javascript
jQuery实现购物车数字加减效果
Mar 14 #Javascript
jQuery+PHP实现动态数字展示特效
Mar 14 #Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
Mar 14 #Javascript
jQuery+jRange实现滑动选取数值范围特效
Mar 14 #Javascript
You might like
在PHP中使用与Perl兼容的正则表达式
2006/11/26 PHP
PHP在不同页面间传递Json数据示例代码
2013/06/08 PHP
PHP实现获取域名的方法小结
2014/11/05 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
js滚动条多种样式,推荐
2007/02/05 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
2011/09/21 Javascript
js获取客户端外网ip的简单实例
2013/11/21 Javascript
javascript中Number对象的toString()方法分析
2014/12/20 Javascript
jQuery插件pagination实现分页特效
2015/04/12 Javascript
学习JavaScript鼠标响应事件
2015/12/25 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
2016/02/26 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
2016/06/12 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
2021/02/25 Javascript
Bootstrap基本插件学习笔记之折叠(22)
2016/12/08 Javascript
jquery,js简单实现类似Angular.js双向绑定
2017/01/13 Javascript
基于jQuery Easyui实现登陆框界面
2017/07/10 jQuery
js图片上传的封装代码
2017/08/01 Javascript
bootstrap table表格客户端分页实例
2017/08/07 Javascript
详解10分钟学会vue滚动行为
2017/09/21 Javascript
浅析vue中的MVVM实现原理
2019/03/04 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
2019/09/16 Javascript
在Python中使用CasperJS获取JS渲染生成的HTML内容的教程
2015/04/09 Python
python 爬虫一键爬取 淘宝天猫宝贝页面主图颜色图和详情图的教程
2018/05/22 Python
Python3 pandas 操作列表实例详解
2019/09/23 Python
PyTorch中Tensor的数据统计示例
2020/02/17 Python
基于python3实现倒叙字符串
2020/02/18 Python
加拿大购物频道:The Shopping Channel
2016/07/21 全球购物
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
Michael Kors英国官网:美国奢侈品品牌
2019/11/13 全球购物
高中三年学习生活的自我评价
2013/10/10 职场文书
出生公证委托书
2014/04/03 职场文书
教师批评与自我批评(群众路线)
2014/10/15 职场文书
科技馆观后感
2015/06/08 职场文书
pytorch 如何把图像数据集进行划分成train,test和val
2021/05/31 Python
python库sklearn常用操作
2021/08/23 Python
浅谈Python中对象是如何被调用的
2022/04/06 Python