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 相关文章推荐
编写Js代码要注意的几条规则
Sep 10 Javascript
更快的异步执行(setTimeout多浏览器)
Aug 12 Javascript
AngularJs  Using $location详解及示例代码
Sep 02 Javascript
jquery+css3问卷答题卡翻页动画效果示例
Oct 26 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
Dec 13 Javascript
JavaScript生成图形验证码
Aug 24 Javascript
javascript字体颜色控件的开发 JS实现字体控制
Nov 27 Javascript
Node.js中你不可不精的Stream(流)
Jun 08 Javascript
vue.js多页面开发环境搭建过程
Apr 24 Javascript
vue data变量相互赋值后被实时同步的解决步骤
Aug 05 Javascript
vue中watch的用法汇总
Dec 28 Vue.js
JavaScript canvas实现流星特效
May 20 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支持页面回退的两种方法
2008/01/10 PHP
php获取某个目录大小的代码
2008/09/10 PHP
Memcache 在PHP中的使用技巧
2010/02/08 PHP
ThinkPHP中的系统常量和预定义常量集合
2014/07/01 PHP
destoon实现资讯信息前面调用它所属分类的方法
2014/07/15 PHP
php在数组中查找指定值的方法
2015/03/17 PHP
使用php+swoole对client数据实时更新(一)
2016/01/07 PHP
php实现图片上传、剪切功能
2016/05/07 PHP
javascript+xml技术实现分页浏览
2008/07/27 Javascript
动态创建的表格单元格中的事件实现代码
2008/12/30 Javascript
web基于浏览器的本地存储方法应用
2012/11/27 Javascript
JS关键字球状旋转效果的实例代码
2013/11/29 Javascript
采用call方式实现js继承
2014/05/20 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
JavaScript阻止事件冒泡示例分享
2014/12/28 Javascript
原生js和jquery分别实现横向导航菜单效果
2016/05/13 Javascript
浅谈js构造函数的方法与原型prototype
2016/07/04 Javascript
浅谈React 属性和状态的一些总结
2016/11/21 Javascript
微信小程序 UI布局常用技巧整理总结
2016/12/05 Javascript
javascript 单例模式详解及简单实例
2017/02/14 Javascript
jquery replace方法去空格
2017/05/08 jQuery
[36:14]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第二局
2016/02/28 DOTA
Python3.6连接Oracle数据库的方法详解
2018/05/18 Python
用于业余项目的8个优秀Python库
2018/09/21 Python
对Python的zip函数妙用,旋转矩阵详解
2018/12/13 Python
python实现DEM数据的阴影生成的方法
2019/07/23 Python
Flask处理Web表单的实现方法
2021/01/31 Python
比利时家具购买网站:Home24
2019/01/03 全球购物
《雨霖铃》教学反思
2014/02/22 职场文书
双方协议书
2014/04/22 职场文书
自主招生推荐信范文
2014/05/10 职场文书
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
土地转让协议书
2014/09/27 职场文书
高一军训决心书
2015/02/05 职场文书
幼儿园园长安全责任书
2015/05/08 职场文书
selenium.webdriver中add_argument方法常用参数表
2021/04/08 Python