javascript中的this详解


Posted in Javascript onDecember 08, 2014

This对象在js中就一直是个坑货,很难判断它到底指向什么,而我们由于来自C++或者python的self的经验,又常常会犯这一类的错误。接下来就详细地讲一下this对象的归属。

rule1:全局环境的this

javascript的环境天生就由函数来决定,在js里不能通过代码块隔开上下文,不被函数所包裹的环境就是全局环境,全局环境中的this就指向全局变量window,看下面一个例子

var name='jjj';

console.log(this.name);

//会成功输出jjj

rule2:作为方法调用时的this

显然这种情况很好判断,与python里的self是一致的,this毫无疑问指向调用方法的对象

var user={

    name:'kkk'

};

user.getName=function(){

    console.log(this.name);

};

user.getName();

//会输出kkk

rule3:作为构造函数时的this

这时的this也不用我多说,显然是指向新创建的对象,构造函数的运行其实并不创建对象,而仅仅是初始化,对象在运行之前就已经被创建
下面还是举例说明

function User(name){

    this.name=name;

}

var f1=new User('kkk');

var f2=User('kkk');

console.log(f1.name);//kkk

console.log(f2.name);//undefined没有name属性

rule4:间接调用中的this

所谓间接调用是指利用apply和call来调用函数,这时的this指向它们参数列表中的第一个参数。

var setName=function(name){

    this.name=name;

};

var user={level:2};

user.apply(setName,'jjj');

console.log(user.name);//jjj

rule5:其他情况中的this

记住其他情况下this均不会被改变,这里也是最容易犯错的地方。

var name = "clever coder";

var person = {

    name : "foocoder",

    hello : function(sth){

        var sayhello = function(sth) {

            console.log(this.name + " says " + sth);

        };

        sayhello(sth);

    }

}

person.hello("hello world");//clever coder says hello world

上面的代码看起来很奇怪,难道this不应该指向person吗?
我们应该记住被嵌套的函数中的this是不会指向嵌套它的函数,在这个例子里面就是sayhello中的this不会指向hello对应的那个函数。如果我们把例子稍稍改一下变成

hello:function(sth){

    console.log(this.name + " says " + sth);

}

//foocoder says hello world

大家应该已经看明白了,这个时候,sayhello并非在作为方法调用,所以this指向全局对象。。。
这时候问题来了,用node运行最初的例子会显示undefined says hello world,不知道有没有大神讲解一下。

rule6:eval破坏所有规则

最后以一个例子结束

var name = "clever coder";

var user={

    name:'kkk'

};

user.getName=function(){

    console.log(this.name);

};

var get=user.getName;

get();//clever coder

大家是否明白了?

Javascript 相关文章推荐
html a标签-超链接中confirm方法使用介绍
Jan 04 Javascript
使用js 设置url参数
Jul 08 Javascript
node.js中的path.dirname方法使用说明
Dec 09 Javascript
7个有用的jQuery代码片段分享
May 19 Javascript
ECMAScript6函数默认参数
Jun 12 Javascript
javascript中数组方法汇总
Jul 07 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 Javascript
Angular.JS学习之依赖注入$injector详析
Oct 20 Javascript
PHP7新特性简述
Jun 11 Javascript
JS数组去重常用方法实例小结【4种方法】
May 28 Javascript
vue+vue-router转场动画的实例代码
Sep 01 Javascript
使用Jenkins部署React项目的方法步骤
Mar 11 Javascript
node.js中的path.isAbsolute方法使用说明
Dec 08 #Javascript
node.js中的path.join方法使用说明
Dec 08 #Javascript
node.js中的path.normalize方法使用说明
Dec 08 #Javascript
node.js中的path.sep方法使用说明
Dec 08 #Javascript
node.js中的path.resolve方法使用说明
Dec 08 #Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
Dec 08 #Javascript
node.js中的dns.getServers方法使用说明
Dec 08 #Javascript
You might like
由php的call_user_func传reference引发的思考
2010/07/23 PHP
PHP 查找字符串常用函数介绍
2012/06/07 PHP
PHP发送短信代码分享
2015/08/11 PHP
解析WordPress中的post_class与get_post_class函数
2016/01/04 PHP
出现“不能执行已释放的Script代码”错误的原因及解决办法
2007/08/29 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
2011/05/12 Javascript
JavaScript插件化开发教程 (三)
2015/01/27 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
leaflet的开发入门教程
2016/11/17 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
2017/02/21 Javascript
Angular利用trackBy提升性能的方法
2018/01/26 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
Vue中CSS动画原理的实现
2019/02/13 Javascript
React学习之JSX与react事件实例分析
2020/01/06 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
2020/02/11 Javascript
微信小程序获取当前时间及星期几的实例代码
2020/09/20 Javascript
[54:41]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VGJ.T VS paiN
2018/03/31 DOTA
Python使用到第三方库PyMuPDF图片与pdf相互转换
2019/05/03 Python
python语言元素知识点详解
2019/05/15 Python
numpy 返回函数的上三角矩阵实例
2019/11/25 Python
Python交互环境下打印和输入函数的实例内容
2020/02/16 Python
Python中lru_cache的使用和实现详解
2021/01/25 Python
python中使用asyncio实现异步IO实例分析
2021/02/26 Python
HTML5实现自带进度条和滑块滑杆效果
2018/04/17 HTML / CSS
viagogo法国票务平台:演唱会、体育比赛、戏剧门票
2017/03/27 全球购物
英国领先的汽车轮胎和快速健康中心:Kwik Fit
2017/10/29 全球购物
来自全球大都市的高级街头服饰:Pegador
2018/01/03 全球购物
法学专业自我鉴定
2014/02/05 职场文书
2014年十一国庆节活动方案
2014/09/16 职场文书
2015年世界无烟日活动总结
2015/02/10 职场文书
优秀员工自荐书
2015/03/06 职场文书
房地产项目合作意向书
2015/05/08 职场文书
新闻通讯稿范文
2015/07/22 职场文书
详细谈谈MYSQL中的COLLATE是什么
2021/06/11 MySQL
go语言使用Casbin实现角色的权限控制
2021/06/26 Golang