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 相关文章推荐
利用javascript中的call实现继承
Jan 22 Javascript
js验证是否为数字的总结
Apr 14 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
Aug 21 Javascript
JS中setTimeout的巧妙用法前端函数节流
Mar 24 Javascript
jQuery Ajax请求后台数据并在前台接收
Dec 10 Javascript
js实现按座位号抽奖
Apr 05 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
Jun 03 Javascript
BootStrap Select清除选中的状态恢复默认状态
Jun 20 Javascript
JavaScript模块模式实例详解
Oct 25 Javascript
js+SVG实现动态时钟效果
Jul 14 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
Aug 12 Javascript
原生JS实现分页
Apr 19 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
我的论坛源代码(二)
2006/10/09 PHP
php中邮箱地址正则表达式实现与详解
2012/04/24 PHP
使用Huagepage和PGO来提升PHP7的执行性能
2015/11/30 PHP
Yii2中使用asset压缩js,css文件的方法
2016/11/24 PHP
FireFox与IE 下js兼容触发click事件的代码
2008/11/20 Javascript
JQuery 学习笔记 element属性控制
2009/07/23 Javascript
$.format,jquery.format 使用说明
2011/07/13 Javascript
js中小数转换整数的方法
2014/01/26 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
2014/06/17 Javascript
jquery得到iframe src属性值的方法
2014/09/25 Javascript
js 操作符汇总
2014/11/08 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
2017/02/16 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
js实现图片上传预览原理分析
2017/07/13 Javascript
说说Vue.js中的functional函数化组件的使用
2019/02/12 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
基于JavaScript实现留言板功能
2020/03/16 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
2020/04/07 Javascript
如何基于jQuery实现五角星评分
2020/09/02 jQuery
python实现根据图标提取分类应用程序实例
2014/09/28 Python
如何在Python中编写并发程序
2016/02/27 Python
Python单例模式实例详解
2017/03/01 Python
Pyqt实现无边框窗口拖动以及窗口大小改变
2018/04/19 Python
Python3远程监控程序的实现方法
2019/07/15 Python
Python操作多维数组输出和矩阵运算示例
2019/11/28 Python
keras tensorflow 实现在python下多进程运行
2020/02/06 Python
Win10下配置tensorflow-gpu的详细教程(无VS2015/2017)
2020/07/14 Python
selenium携带cookies模拟登陆CSDN的实现
2021/01/19 Python
美国皮靴公司自1863年:The Frye Company
2016/11/30 全球购物
Elemental Herbology官网:英国美容品牌
2019/04/27 全球购物
GUESS Factory加拿大:牛仔裤、服装及配饰
2019/09/20 全球购物
编写一子程序,将一链表倒序,即使链表表尾变表头,表头变表尾
2016/02/10 面试题
学习党的群众路线实践活动思想汇报
2014/09/12 职场文书
安全生产先进个人总结
2015/02/15 职场文书
小学运动会入场词
2015/07/18 职场文书
Python内置数据类型中的集合详解
2022/03/18 Python