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:以前写的xmlhttp池,代码
May 18 Javascript
JQuery获取文本框中字符长度的代码
Sep 29 Javascript
基于jquery实现状态限定编辑的代码
Feb 11 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
Sep 11 Javascript
Js实现网页键盘控制翻页的方法
Oct 30 Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 Javascript
requireJS使用指南
Apr 27 Javascript
AngularJS 中的事件详解
Jul 28 Javascript
jquery实现简单的瀑布流布局
Dec 11 Javascript
php简单数据库操作类的封装
Jun 08 Javascript
Vuex提升学习篇
Jan 11 Javascript
JavaScript监听键盘事件代码实现
Jun 03 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
一个用php3编写的简单计数器
2006/10/09 PHP
PHP 显示客户端IP与服务器IP的代码
2010/10/12 PHP
PHP导入导出Excel代码
2015/07/07 PHP
利用php实现一周之内自动登录存储机制(cookie、session、localStorage)
2016/10/31 PHP
PHP网站常见安全漏洞,及相应防范措施总结
2021/03/01 PHP
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
2011/02/24 Javascript
jquery zTree异步加载简单实例分享
2013/02/05 Javascript
写JQuery插件的基本知识
2013/11/25 Javascript
js获取指定日期周数以及星期几的小例子
2014/06/27 Javascript
基于jquery实现等比缩放图片
2014/12/03 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
2015/05/09 Javascript
jQuery采用连缀写法实现的折叠菜单效果
2015/09/18 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
2016/01/08 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
2016/11/30 Javascript
jQuery实现标签页效果实战(4)
2017/02/08 Javascript
Node.js使用Koa搭建 基础项目
2018/01/08 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
2019/05/14 jQuery
微信小程序vant弹窗组件的实现方式
2020/02/21 Javascript
Python使用django获取用户IP地址的方法
2015/05/11 Python
简要讲解Python编程中线程的创建与锁的使用
2016/02/28 Python
基于Python os模块常用命令介绍
2017/11/03 Python
快速查询Python文档方法分享
2017/12/27 Python
解决Mac安装scrapy失败的问题
2018/06/13 Python
python爬取微信公众号文章
2018/08/31 Python
Django中信号signals的简单使用方法
2019/07/04 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
Python稀疏矩阵及参数保存代码实现
2020/04/18 Python
关于pycharm 切换 python3.9 报错 ‘HTMLParser‘ object has no attribute ‘unescape‘ 的问题
2020/11/24 Python
DHC中国官方购物网站:日本通信销售No.1化妆品
2016/08/20 全球购物
德国户外商店:eXXpozed
2020/07/25 全球购物
《会变的花树叶》教学反思
2014/02/10 职场文书
银行服务感言
2014/03/01 职场文书
工作检讨书怎么写
2014/10/10 职场文书
安全温馨提示语大全
2015/07/14 职场文书
2015年国培研修感言
2015/08/01 职场文书