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 相关文章推荐
简单的代码实现jquery定时器
Nov 17 Javascript
js对象的复制继承实例
Jan 10 Javascript
JQuery实现左右滚动菜单特效
Sep 28 Javascript
JavaScript如何动态创建table表格
Aug 02 Javascript
js实现页面a向页面b传参的方法
May 29 Javascript
很实用的js选项卡切换效果
Aug 12 Javascript
js HTML5手机刮刮乐代码
Sep 29 Javascript
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
Vue的路由动态重定向和导航守卫实例
Mar 17 Javascript
vuex操作state对象的实例代码
Apr 25 Javascript
angular 数据绑定之[]和{{}}的区别
Sep 25 Javascript
vue实现简单的日历效果
Sep 24 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使用curl获取https请求的方法
2015/02/11 PHP
PHP SESSION的增加、删除、修改、查看操作
2015/03/20 PHP
php fread读取文件注意事项
2016/09/24 PHP
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
2017/08/04 PHP
php中的依赖注入实例详解
2019/08/14 PHP
JavaScript中出现乱码的处理心得
2009/12/24 Javascript
基于jQuery UI CSS Framework开发Widget的经验
2010/08/21 Javascript
input按钮的事件处理大全
2010/12/10 Javascript
js用Date对象处理时间实现思路及代码
2013/01/31 Javascript
JavaScript中实现继承的三种方式和实例
2015/01/29 Javascript
JS中的Replace方法使用经验分享
2015/05/20 Javascript
创建你的第一个AngularJS应用的方法
2015/06/16 Javascript
JavaScript对象学习小结
2015/09/02 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
2015/10/28 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
JavaScript Math.round() 方法
2015/12/18 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
2016/08/08 Javascript
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
Vue实现push数组并删除的例子
2019/11/01 Javascript
JS实现移动端双指缩放和旋转方法
2019/12/13 Javascript
iSlider手机端图片滑动切换插件使用详解
2019/12/24 Javascript
jQuery插件simplePagination的使用方法示例
2020/04/28 jQuery
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
[06:01]刀塔次级联赛top10第一期
2014/11/07 DOTA
Python中使用中文的方法
2011/02/19 Python
从零学python系列之新版本导入httplib模块报ImportError解决方案
2014/05/23 Python
Python while、for、生成器、列表推导等语句的执行效率测试
2015/06/03 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
在python中利用try..except来代替if..else的用法
2019/12/19 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
CSS3 实现的缩略图悬停效果
2020/12/09 HTML / CSS
Travelstart沙特阿拉伯:廉价航班、豪华酒店和实惠的汽车租赁优惠
2019/04/06 全球购物
安全检查管理制度
2014/02/02 职场文书
幼儿园国庆节活动总结
2015/03/23 职场文书
团委工作总结2015
2015/04/02 职场文书
在HTML中引入CSS的几种方式介绍
2021/12/06 HTML / CSS