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 相关文章推荐
Firefox div高度自适应
Apr 28 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
Oct 11 Javascript
html+css+js实现xp window界面及有关功能
Mar 26 Javascript
jQuery插件dataTables添加序号列的方法
Jul 06 Javascript
Vuejs第十篇之vuejs父子组件通信
Sep 06 Javascript
Angular ng-repeat 对象和数组遍历实例
Sep 14 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
Jan 04 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果
Aug 16 Javascript
vue-form表单验证是否为空值的实例详解
Oct 29 Javascript
原生JS实现拖拽功能
Dec 16 Javascript
JS中循环遍历数组的四种方式总结
Jan 23 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 类相关函数的使用详解
2013/05/10 PHP
实用的简单PHP分页集合包括使用方法
2013/10/21 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
指定js可访问其它域名的cookie的方法
2007/09/18 Javascript
css配合jquery美化 select
2013/11/29 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
2014/04/12 Javascript
JavaScript实现Flash炫光波动特效
2015/05/14 Javascript
jQuery超赞的评分插件(8款)
2015/08/20 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
JS对象创建的几种方式整理
2017/02/28 Javascript
javascript代码优化的8点总结
2018/01/29 Javascript
使用JSON格式提交数据到服务端的实例代码
2018/04/01 Javascript
vue3 源码解读之 time slicing的使用方法
2019/10/31 Javascript
vant IndexBar实现的城市列表的示例代码
2019/11/20 Javascript
Node.js 在本地生成日志文件的方法
2020/02/07 Javascript
JavaScript实现轮播图片完整代码
2020/03/07 Javascript
Python实现的监测服务器硬盘使用率脚本分享
2014/11/07 Python
浅谈django model的get和filter方法的区别(必看篇)
2017/05/23 Python
python操作MySQL 模拟简单银行转账操作
2017/09/27 Python
python编写简易聊天室实现局域网内聊天功能
2018/07/28 Python
python绘制多个子图的实例
2019/07/07 Python
Python字符串、列表、元组、字典、集合的补充实例详解
2019/12/20 Python
Python3 虚拟开发环境搭建过程(图文详解)
2020/01/06 Python
Python selenium键盘鼠标事件实现过程详解
2020/07/28 Python
Python常用扩展插件使用教程解析
2020/11/02 Python
开普敦通行证:Cape Town Pass
2019/07/18 全球购物
AJax面试题
2014/11/25 面试题
介绍下Java中==和equals的区别
2013/09/01 面试题
JavaScript实现页面动态验证码的实现示例
2021/03/23 Javascript
城管综合整治方案
2014/05/01 职场文书
2014年十八届四中全会思想汇报范文
2014/10/17 职场文书
2014年会计主管工作总结
2014/12/20 职场文书
团代会闭幕词
2015/01/28 职场文书
网络研修随笔感言
2015/11/18 职场文书
让文件路径提取变得更简单的Python Path库
2021/05/27 Python