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弹出填写提示效果代码
Apr 16 Javascript
Js实现网页键盘控制翻页的方法
Oct 30 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
Jan 03 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 Javascript
javascript加载xml 并解析各节点的值(实现方法)
Oct 12 Javascript
js中常用的Math方法总结
Jan 12 Javascript
微信小程序如何获知用户运行小程序的场景教程
May 17 Javascript
详解vue项目的构建,打包,发布全过程
Nov 23 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
Apr 04 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
Sep 04 Javascript
javascrit中undefined和null的区别详解
Apr 07 Javascript
vue中对象数组去重的实现
Feb 06 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 生成饼图 三维饼图
2009/09/28 PHP
完美解决:Apache启动问题―(OS 10022)提供了一个无效的参数
2013/06/08 PHP
PHP生成不重复标识符的方法
2014/11/21 PHP
PHP类的特性实例分析
2016/09/28 PHP
JavaScript的面向对象(一)
2006/11/09 Javascript
jQuery实现DIV层收缩展开的方法
2015/02/27 Javascript
Javascript实现飞动广告效果的方法
2015/05/25 Javascript
js模仿php中strtotime()与date()函数实现方法
2015/08/11 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
jquery文字填写自动高度的实现方法
2016/11/07 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
2017/03/22 jQuery
ES6正则表达式的一些新功能总结
2017/05/09 Javascript
JavaScript订单操作小程序完整版
2017/06/23 Javascript
深入理解vue中slot与slot-scope的具体使用
2018/01/26 Javascript
在Vue中使用axios请求拦截的实现方法
2018/10/25 Javascript
利用原生JavaScript实现造日历轮子实例代码
2019/05/08 Javascript
使用react context 实现vue插槽slot功能
2019/07/18 Javascript
[43:51]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS Secret
2018/03/31 DOTA
python在linux中输出带颜色的文字的方法
2014/06/19 Python
利用Python实现命令行版的火车票查看器
2016/08/05 Python
Python环境搭建之OpenCV的步骤方法
2017/10/20 Python
快速了解Python中的装饰器
2018/01/11 Python
使用Python实现windows下的抓包与解析
2018/01/15 Python
python web基础之加载静态文件实例
2018/03/20 Python
python复制文件到指定目录的实例
2018/04/27 Python
Python3 利用requests 库进行post携带账号密码请求数据的方法
2018/10/26 Python
Python 分享10个PyCharm技巧
2019/07/13 Python
让你的Python代码实现类型提示功能
2019/11/19 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
Python任务自动化工具tox使用教程
2020/03/17 Python
python list等分并从等分的子集中随机选取一个数
2020/11/16 Python
耐克美国官网:Nike.com
2016/08/01 全球购物
Manuka Doctor美国官网:麦卢卡蜂蜜和蜂毒护肤
2016/12/25 全球购物
绿色校园广播稿
2014/10/13 职场文书
2014年财务部工作总结
2014/11/11 职场文书
教你使用TensorFlow2识别验证码
2021/06/11 Python