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 相关文章推荐
用js计算页面执行时间的函数
Dec 07 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
Mar 01 Javascript
javascript实现数独解法
Mar 14 Javascript
纯javascript移动优先的幻灯片效果
Nov 02 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
Dec 15 Javascript
JavaScript鼠标特效大全
Sep 13 Javascript
JS实现图片切换效果
Nov 17 Javascript
JS数组去重的6种方法完整实例
Dec 08 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 Javascript
JavaScript中Dom操作实例详解
Jul 08 Javascript
vue keep-alive 动态删除组件缓存的例子
Nov 04 Javascript
JavaScript运行机制实例分析
Apr 11 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
几个优化WordPress中JavaScript加载体验的插件介绍
2015/12/17 PHP
thinkphp配置文件路径的实现方法
2016/08/30 PHP
php基于websocket搭建简易聊天室实践
2016/10/24 PHP
详解PHP用substr函数截取字符串中的某部分
2016/12/03 PHP
PHP针对redis常用操作实例详解
2019/08/17 PHP
js 通用javascript函数库整理
2011/08/14 Javascript
Javascript this 的一些学习总结
2012/08/31 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
2014/10/14 Javascript
JavaScript和CSS交互的方法汇总
2014/12/02 Javascript
JavaScript中的substr()方法使用详解
2015/06/06 Javascript
高效的jquery数字滚动特效
2015/12/17 Javascript
一次$.getJSON不执行的简单记录
2016/07/19 Javascript
js中遍历对象的属性和值的方法
2016/07/27 Javascript
漂亮实用的页面loading(加载)封装代码
2017/02/03 Javascript
JavaScript获取select中text值的方法
2017/02/13 Javascript
详解Vue监听数据变化原理
2017/03/08 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
Vue一个案例引发的递归组件的使用详解
2018/11/15 Javascript
微信小程序实现页面浮动导航
2019/01/28 Javascript
在vue-cli中引入lodash.js并使用详解
2019/11/13 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
2020/04/13 Javascript
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
uniapp微信小程序:key失效的解决方法
2021/01/20 Javascript
[38:32]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第二局
2016/02/26 DOTA
python语言使用技巧分享
2016/05/31 Python
Python的面向对象编程方式学习笔记
2016/07/12 Python
Python中property属性实例解析
2018/02/10 Python
python的json中方法及jsonpath模块用法分析
2019/12/06 Python
使用jupyter notebook将文件保存为Markdown,HTML等文件格式
2020/04/14 Python
食品安全责任书
2014/04/15 职场文书
程序员求职信
2014/04/16 职场文书
跑操口号
2014/06/12 职场文书
贪污检举信范文
2015/03/02 职场文书
2019年年中工作总结讲话稿模板
2019/03/25 职场文书
MySQL下使用Inplace和Online方式创建索引的教程
2021/05/26 MySQL
php修改word的实例方法
2021/11/17 PHP