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预览上传图片发现的问题的解决方法
Nov 25 Javascript
js+jquery实现图片裁剪功能
Jan 02 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
Mar 08 Javascript
使用Ajax与服务器(JSON)通信实例
Nov 04 Javascript
self.attachevent is not a function的解决方法
Apr 04 Javascript
vue实现表格数据的增删改查
Jul 10 Javascript
JavaScript实现的超简单计算器功能示例
Dec 23 Javascript
Vue组件通信之Bus的具体使用
Dec 28 Javascript
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
微信小程序在text文本实现多种字体样式
Nov 08 Javascript
在js文件中引入(调用)另一个js文件的三种方法
Sep 11 Javascript
vue+iview实现手机号分段输入框
Mar 25 Vue.js
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
smarty模板判断数组为空的方法
2015/06/10 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
3款实用的在线JS代码工具(国外)
2012/03/15 Javascript
jquery应该如何来设置改变按钮input的onclick事件
2012/12/10 Javascript
php is_numberic函数造成的SQL注入漏洞
2014/03/10 Javascript
jQ处理xml文件和xml字符串的方法(详解)
2016/11/22 Javascript
JavaScript、C# URL编码、解码总结
2017/01/21 Javascript
很棒的vue弹窗组件
2017/05/24 Javascript
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
浅谈vue中数据双向绑定的实现原理
2017/09/14 Javascript
Layui数据表格之获取表格中所有的数据方法
2018/08/20 Javascript
5分钟快速掌握JS中var、let和const的异同
2018/09/19 Javascript
vue element中axios下载文件(后端Python)
2019/05/10 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
2019/09/03 Javascript
vue中渲染对象中属性时显示未定义的解决
2020/07/31 Javascript
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
使用python对文件中的数值进行累加的实例
2018/11/28 Python
python使用pygame模块实现坦克大战游戏
2020/03/25 Python
Python Pandas 如何shuffle(打乱)数据
2019/07/30 Python
wxpython布局的实现方法
2019/11/01 Python
python对象转字典的两种实现方式示例
2019/11/07 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
python matplotlib.pyplot.plot()参数用法
2020/04/14 Python
深入了解python列表(LIST)
2020/06/08 Python
卡拉威高尔夫官方网站:Callaway Golf
2020/09/16 全球购物
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
致跳远运动员广播稿
2014/02/11 职场文书
消防安全责任书范本
2014/04/15 职场文书
如何写求职信
2014/05/24 职场文书
讲文明懂礼貌演讲稿
2014/09/11 职场文书
2014入党积极分子批评与自我批评思想汇报
2014/09/20 职场文书
2014年学生管理工作总结
2014/12/20 职场文书
复试通知单模板
2015/04/24 职场文书
起诉书范文
2015/05/20 职场文书
php+laravel 扫码二维码签到功能
2021/05/15 PHP
Go语言的协程上下文的几个方法和用法
2022/04/11 Golang