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可否多线程? 深入理解JavaScript定时机制
May 23 Javascript
jquery 添加节点的几种方法介绍
Sep 04 Javascript
Javascript和Java获取各种form表单信息的简单实例
Feb 14 Javascript
Jquery Ajax Error 调试错误的技巧
Nov 20 Javascript
zTree树形插件异步加载方法详解
Jun 14 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
Jul 13 Javascript
微信小程序的日期选择器的实例详解
Sep 29 Javascript
JS基于for语句编写的九九乘法表示例
Jan 04 Javascript
JavaScript常用数组操作方法,包含ES6方法
May 10 Javascript
详解ES6 Fetch API HTTP请求实用指南
Nov 14 Javascript
VuePress 静态网站生成方法步骤
Feb 14 Javascript
Openlayers实现地图的基本操作
Sep 28 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下获取Discuz论坛登录用户名、用户组、用户ID等信息的实现代码
2010/12/29 PHP
用PHP写的基于Memcache的Queue实现代码
2011/11/27 PHP
PHP实现伪静态方法汇总
2016/01/13 PHP
Linux下快速搭建php开发环境
2017/03/13 PHP
javascript实现 在光标处插入指定内容
2007/05/25 Javascript
关于图片按比例自适应缩放的js代码
2011/10/30 Javascript
比较新旧两个数组值得增加和删除的JS代码
2013/10/30 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
2015/03/04 Javascript
简介JavaScript中的unshift()方法的使用
2015/06/09 Javascript
jquery实现图片上传之前预览的方法
2015/07/11 Javascript
详解JavaScript基于面向对象之继承实例
2015/12/16 Javascript
JavaScript 经典实例日常收集整理(常用经典)
2016/03/30 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
2016/06/03 Javascript
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
浅谈vue路径优化之resolve
2017/10/13 Javascript
关于vue.js中实现方法内某些代码延时执行
2019/11/14 Javascript
vue组件系列之TagsInput详解
2020/05/14 Javascript
vue-iview动态新增和删除的方法
2020/06/17 Javascript
Python yield使用方法示例
2013/12/04 Python
python实现的简单抽奖系统实例
2015/05/22 Python
利用Hyperic调用Python实现进程守护
2018/01/02 Python
Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
2018/09/14 Python
详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图)
2019/08/06 Python
Django项目之Elasticsearch搜索引擎的实例
2019/08/21 Python
python实现的汉诺塔算法示例
2019/10/23 Python
python递归函数用法详解
2020/10/26 Python
python中四舍五入的正确打开方式
2021/01/18 Python
Zipadee-Zip襁褓过渡毯:Sleeping Baby
2018/12/30 全球购物
车库门开启器、遥控器和零件:Chamberlain
2019/04/09 全球购物
澳大利亚设计师服装在线:MISHA
2019/10/07 全球购物
意大利在线高尔夫商店:Online Golf
2021/03/09 全球购物
献爱心倡议书
2014/04/14 职场文书
公司爱心捐款倡议书
2014/05/14 职场文书
学习委员竞选稿
2015/11/20 职场文书
创业计划书之寿司
2019/07/19 职场文书
Django项目配置Memcached和Redis, 缓存选择哪个更有优势
2021/04/06 Python