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 相关文章推荐
Extjs TriggerField在弹出窗口显示不出问题的解决方法
Jan 08 Javascript
js传中文参数controller里获取参数乱码问题解决方法
Jan 03 Javascript
jQuery中:first选择器用法实例
Dec 30 Javascript
jQuery网页选项卡插件rTabs用法实例分析
Aug 26 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
Nov 18 Javascript
jQuery获取file控件中图片的宽高与大小
Aug 04 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
Oct 27 Javascript
js实现放大镜特效
May 18 Javascript
简单实现jQuery轮播效果
Aug 18 jQuery
谈谈JavaScript中super(props)的重要性
Feb 12 Javascript
详解JavaScript 浮点数运算的精度问题
Jul 23 Javascript
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
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
德生PL990,目前市面上唯一一款便携式插卡蓝牙全波段高性能收音机
2021/03/02 无线电
PHP+AJAX实现无刷新注册(带用户名实时检测)
2006/12/02 PHP
php 归并排序 数组交集
2011/05/10 PHP
php操作JSON格式数据的实现代码
2011/12/24 PHP
php实现天干地支计算器示例
2014/03/14 PHP
PHP防止post重复提交数据的简单例子
2014/06/07 PHP
PHP APC配置文件2套和参数详解
2014/06/11 PHP
JS Timing
2007/04/21 Javascript
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
2007/12/23 Javascript
预加载css或javascript的js代码
2010/04/23 Javascript
AngularJS基础知识
2014/12/21 Javascript
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
简单谈谈Javascript中类型的判断
2015/10/19 Javascript
大型JavaScript应用程序架构设计模式
2016/06/29 Javascript
JavaScript cookie详解及简单实例应用
2016/12/31 Javascript
AngularJS中的作用域实例分析
2018/05/16 Javascript
jQuery AJAX与jQuery事件的分析讲解
2019/02/18 jQuery
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
2019/04/20 Javascript
python调用百度地图WEB服务API获取地点对应坐标值
2019/01/16 Python
python+webdriver自动化环境搭建步骤详解
2019/06/03 Python
对PyQt5的输入对话框使用(QInputDialog)详解
2019/06/25 Python
Python实现栈和队列的简单操作方法示例
2019/11/29 Python
numpy:np.newaxis 实现将行向量转换成列向量
2019/11/30 Python
Tensorflow进行多维矩阵的拆分与拼接实例
2020/02/07 Python
Annoushka英国官网:英国奢侈珠宝品牌
2018/10/20 全球购物
工程项目经理岗位职责
2013/12/15 职场文书
大学生开西餐厅创业计划书
2014/02/01 职场文书
产品设计开发计划书
2014/05/07 职场文书
2014年团员学习十八大思想汇报
2014/09/13 职场文书
群众路线党员个人整改措施
2014/10/27 职场文书
2015年政协委员工作总结
2015/05/20 职场文书
小学三年级数学教学反思
2016/02/16 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书
nginx配置proxy_pass中url末尾带/与不带/的区别详解
2021/03/31 Servers
微信小程序用户授权最佳实践指南
2021/05/08 Javascript
详解python的内存分配机制
2021/05/10 Python