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 布尔型分析
Dec 22 Javascript
Ext JS添加子组件的误区探讨
Jun 28 Javascript
JS复制到剪贴板示例代码
Oct 30 Javascript
JS Loading功能的简单实现
Nov 29 Javascript
JS实现的仿QQ空间图片弹出效果代码
Feb 23 Javascript
Node.js中使用jQuery的做法
Aug 17 Javascript
JavaScript实现图片轮播组件代码示例
Nov 22 Javascript
vue2实现可复用的轮播图carousel组件详解
Nov 27 Javascript
vue.js内置组件之keep-alive组件使用
Jul 10 Javascript
layui框架table 数据表格的方法级渲染详解
Aug 19 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
Jun 20 Javascript
小程序自定义弹框效果
Nov 16 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
使用sockets:从新闻组中获取文章(三)
2006/10/09 PHP
PHP中的生成XML文件的4种方法分享
2012/10/06 PHP
php中数字0和空值的区别分析
2014/06/05 PHP
php利用cookies实现购物车的方法
2014/12/10 PHP
兼容ie、firefox的图片自动缩放的css跟js代码分享
2012/01/21 Javascript
JavaScript组合拼接字符串的效率对比测试
2014/11/06 Javascript
修复bash漏洞的shell脚本分享
2014/12/31 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
javascript作用域问题实例分析
2015/07/13 Javascript
JS实现样式清新的横排下拉菜单效果
2015/10/09 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
2015/12/16 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
详解webpack运行Babel教程
2018/06/13 Javascript
简单说说angular.json文件的使用
2018/10/29 Javascript
jquery获取img的src值实例介绍
2019/01/16 jQuery
详解babel升级到7.X采坑总结
2019/05/12 Javascript
Vue项目中使用WebUploader实现文件上传的方法
2019/07/21 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
2020/07/26 Javascript
Django中使用locals()函数的技巧
2015/07/16 Python
python PIL模块与随机生成中文验证码
2016/02/27 Python
Python两个内置函数 locals 和globals(学习笔记)
2016/08/28 Python
Python实现抓取网页生成Excel文件的方法示例
2017/08/05 Python
Django 连接sql server数据库的方法
2018/06/30 Python
深入了解Django View(视图系统)
2019/07/23 Python
使用celery和Django处理异步任务的流程分析
2020/02/19 Python
PyQt5连接MySQL及QMYSQL driver not loaded错误解决
2020/04/29 Python
Numpy ndarray 多维数组对象的使用
2021/02/10 Python
解决Pyinstaller打包软件失败的一个坑
2021/03/04 Python
澳大利亚在线百货商店:Real Smart
2017/08/13 全球购物
波兰多品牌运动商店:StreetStyle24.pl
2020/09/22 全球购物
入党申请自荐书范文
2014/02/11 职场文书
公司租房协议书
2014/10/14 职场文书
工伤事故证明
2014/10/20 职场文书
MySQL数据迁移相关总结
2021/04/29 MySQL
详细了解java监听器和过滤器
2021/07/09 Java/Android