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 相关文章推荐
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
Mar 08 Javascript
JavaScript 5 新增 Array 方法实现介绍
Feb 06 Javascript
eclipse导入jquery包后报错的解决方法
Feb 17 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
May 12 Javascript
jQuery模拟淘宝购物车功能
Feb 27 Javascript
jQuery中用on绑定事件时需注意的事项
Mar 19 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
Jan 16 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
Apr 28 Javascript
react 中父组件与子组件双向绑定问题
May 20 Javascript
详解JavaScript 浮点数运算的精度问题
Jul 23 Javascript
jQuery实现推拉门效果
Oct 19 jQuery
Taro小程序自定义顶部导航栏功能的实现
Dec 17 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递归实现无限分类生成下拉列表的函数
2010/08/08 PHP
PHP内存缓存Memcached类实例
2014/12/08 PHP
Yii2框架实现注册和登录教程
2016/09/30 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
javascript让setInteval里的函数参数中的this指向特定的对象
2010/01/31 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
2013/12/23 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
js实现div弹出层的方法
2014/11/20 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
Vue系列:通过vue-router如何传递参数示例
2017/01/16 Javascript
vue绑定class与行间样式style详解
2017/08/16 Javascript
Vue 组件封装 并使用 NPM 发布的教程
2018/09/30 Javascript
element vue Array数组和Map对象的添加与删除操作
2018/11/14 Javascript
layer弹出子iframe层父子页面传值的实现方法
2018/11/22 Javascript
python中使用OpenCV进行人脸检测的例子
2014/04/18 Python
python smtplib模块发送SSL/TLS安全邮件实例
2015/04/08 Python
python中threading超线程用法实例分析
2015/05/16 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
python用列表生成式写嵌套循环的方法
2018/11/08 Python
在python2.7中用numpy.reshape 对图像进行切割的方法
2018/12/05 Python
在cmd中查看python的安装路径方法
2019/07/03 Python
Python3 实现减少可调用对象的参数个数
2019/12/20 Python
Python3 shutil(高级文件操作模块)实例用法总结
2020/02/19 Python
Python用摘要算法生成token及检验token的示例代码
2020/12/01 Python
CSS3 文字动画效果
2020/11/12 HTML / CSS
Algenist奥杰尼官网:微藻抗衰老护肤品牌
2017/07/15 全球购物
澳大利亚便宜隐形眼镜购买网站:QUICKLENS Australia
2018/10/06 全球购物
Java如何读取CLOB字段
2013/10/10 面试题
医学类导师推荐信范文
2013/11/19 职场文书
四年的个人工作自我评价
2013/12/10 职场文书
硕士研究生求职自荐信范文
2014/03/11 职场文书
年终总结会主持词
2014/03/25 职场文书
缅怀先烈演讲稿
2014/09/03 职场文书
2016年党员承诺书范文
2016/03/24 职场文书
2019假期福利管理制度!
2019/07/15 职场文书
MySQL Server层四个日志的实现
2022/03/31 MySQL