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 相关文章推荐
jQuery中绑定事件的命名空间详解
Apr 05 Javascript
JQuery操作单选按钮以及复选按钮示例
Sep 23 Javascript
JavaScript在IE和FF下的兼容性问题
May 19 Javascript
JavaScript动态提示输入框输入字数的方法
Jul 27 Javascript
基于JavaScript怎么实现让歌词滚动播放
Nov 03 Javascript
bootstrap table动态加载数据示例代码
Mar 25 Javascript
JavaScript运行原理分析
Feb 09 Javascript
element-ui 上传图片后清空图片显示的实例
Sep 04 Javascript
JavaScript面试技巧之数组的一些不low操作
Mar 22 Javascript
微信小程序图片左右摆动效果详解
Jul 13 Javascript
JS实现关闭小广告特效
Jan 29 Javascript
JavaScript实现前端倒计时效果
Feb 09 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新手上路(十四)
2006/10/09 PHP
深入浅析用PHP实现MVC
2016/03/02 PHP
php编程中echo用逗号和用点号连接的区别
2016/03/26 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
用php实现分页效果的示例代码
2020/12/10 PHP
Fixie.js 自动填充内容的插件
2012/06/28 Javascript
js实现省市联动效果的简单实例
2014/02/10 Javascript
浅谈javascript中的instanceof和typeof
2015/02/27 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
angularJs中datatable实现代码
2017/06/03 Javascript
Vue2.0 多 Tab切换组件的封装实例
2017/07/28 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
Vue切换div显示隐藏,多选,单选代码解析
2020/07/14 Javascript
three.js显示中文字体与tween应用详析
2021/01/04 Javascript
Python3实现将文件归档到zip文件及从zip文件中读取数据的方法
2015/05/22 Python
在Django框架中设置语言偏好的教程
2015/07/27 Python
批量将ppt转换为pdf的Python代码 只要27行!
2018/02/26 Python
python re库的正则表达式入门学习教程
2019/03/08 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
Python编写单元测试代码实例
2020/09/10 Python
python pip如何手动安装二进制包
2020/09/30 Python
Zavvi美国:英国娱乐之家
2017/03/19 全球购物
StudentUniverse英国:学生航班、酒店和旅游
2019/08/25 全球购物
美国在线艺术商店:HandmadePiece
2020/11/06 全球购物
Python里面search()和match()的区别
2016/09/21 面试题
金属材料工程毕业生个人的自我评价
2013/11/28 职场文书
对标管理实施方案
2014/03/12 职场文书
责任书范本
2014/08/25 职场文书
学校运动会广播稿100条
2014/09/14 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书
2015年试用期工作总结范文
2015/05/28 职场文书
看雷锋电影观后感
2015/06/10 职场文书
纯 CSS 自定义多行省略的问题(从原理到实现)
2021/11/11 HTML / CSS
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android
【海涛解说】史上最给力比赛,挑战DOTA极限
2022/04/01 DOTA