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动态的改变IFrame的高度实现自动伸展
Oct 12 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
Aug 16 Javascript
基于javascript实现简单的抽奖系统
Apr 15 Javascript
jQuery动态加载css文件实现方法
Jun 15 Javascript
用jQuery实现可输入多选下拉组合框实例代码
Jan 18 Javascript
微信小程序实现多宫格抽奖活动
Apr 15 Javascript
vue裁切预览组件功能的实现步骤
May 04 Javascript
element-ui使用导航栏跳转路由的用法详解
Aug 22 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
Nov 12 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
Aug 27 Javascript
QT与javascript交互数据的实现
May 26 Javascript
html5调用摄像头截图功能
Jan 18 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利用header函数实现文件下载时直接提示保存
2009/11/12 PHP
php将fileterms函数返回的结果变成可读的形式
2011/04/21 PHP
php缩放图片(根据宽高的等比例缩放)实例介绍
2013/06/09 PHP
解析MySql与Java的时间类型
2013/06/22 PHP
PHP生成Gif图片验证码
2013/10/27 PHP
PHP使用CURL模拟登录的方法
2015/07/08 PHP
Aster vs KG BO3 第二场2.18
2021/03/10 DOTA
jquery 打开窗口返回值实现代码
2010/03/04 Javascript
Node.js实战 建立简单的Web服务器
2012/03/08 Javascript
JavaScript实现点击按钮直接打印
2016/01/06 Javascript
每日十条JavaScript经验技巧(一)
2016/06/23 Javascript
原生JS实现网络彩票投注效果
2016/09/25 Javascript
Bootstrap Modal遮罩弹出层(完整版)
2016/11/21 Javascript
Angular组件化管理实现方法分析
2017/03/17 Javascript
Kindeditor单独调用多图上传实例
2017/07/31 Javascript
详解如何在Vue里建立长按指令
2018/08/20 Javascript
在vue中读取本地Json文件的方法
2018/09/06 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
2019/09/28 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
利用Python开发实现简单的记事本
2016/11/15 Python
Python 专题六 局部变量、全局变量global、导入模块变量
2017/03/20 Python
Python中对象的引用与复制代码示例
2017/12/04 Python
Python通用循环的构造方法实例分析
2018/12/19 Python
python web框架中实现原生分页
2019/09/08 Python
Python爬虫之Selenium实现窗口截图
2020/12/04 Python
什么情况下你必须要把一个类定义为abstract的
2013/01/06 面试题
儿科主治医生个人求职信
2013/09/23 职场文书
村级环境卫生整治方案
2014/05/04 职场文书
2014年安全生产责任书
2014/07/22 职场文书
酒店管理失职检讨书
2014/09/16 职场文书
软件研发工程师岗位职责
2014/09/30 职场文书
四年级小学生评语
2014/12/26 职场文书
违反纪律检讨书范文
2015/05/07 职场文书
教师廉政准则心得体会
2016/01/20 职场文书
分享几种python 变量合并方法
2022/03/20 Python
JS前端使用canvas实现扩展物体类和事件派发
2022/08/05 Javascript