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的执行顺序 之实战篇
Mar 03 Javascript
浏览器解析js生成的html出现样式问题的解决方法
Apr 16 Javascript
关于JS控制代码暂停的实现方法分享
Oct 11 Javascript
JS iFrame加载慢怎么解决
May 13 Javascript
JavaScript Ajax编程 应用篇
Jul 02 Javascript
js中window.open的参数及注意注意事项
Jul 06 Javascript
jQuery自适应轮播图插件Swiper用法示例
Aug 24 Javascript
原生js实现无限循环轮播图效果
Jan 20 Javascript
Vue.js框架路由使用方法实例详解
Aug 25 Javascript
原生js实现简单的模态框示例
Sep 08 Javascript
web前端vue实现插值文本和输出原始html
Jan 19 Javascript
微信小程序去除左上角返回键的实现方法
Mar 06 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内存溢出问题的解决方法
2013/06/25 PHP
php实现统计网站在线人数的方法
2015/05/12 PHP
php 数组字符串搜索array_search技巧
2016/07/05 PHP
php实现的SSO单点登录系统接入功能示例分析
2016/10/12 PHP
浅谈Laravel核心解读之Console内核
2018/12/02 PHP
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
2009/04/07 Javascript
13个绚丽的Jquery 界面设计网站推荐
2010/09/28 Javascript
JS文本框不能输入空格验证方法
2013/03/19 Javascript
jQuery模拟超链接点击效果代码
2013/04/21 Javascript
js使用数组判断提交数据是否存在相同数据
2013/11/27 Javascript
纯JS代码实现隔行变色鼠标移入高亮
2016/11/23 Javascript
Javascript之面向对象--方法
2016/12/02 Javascript
canvas学习之API整理笔记(二)
2016/12/29 Javascript
bootstrap输入框组件使用方法详解
2017/01/19 Javascript
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
2019/04/28 Javascript
JavaScript实现的开关灯泡点击切换特效示例
2019/07/08 Javascript
解决layui下拉框监听问题(监听不到值的变化)
2019/09/28 Javascript
JavaScript变量Dom对象的所有属性
2020/04/30 Javascript
python实现简单的计时器功能函数
2015/03/14 Python
Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)
2019/06/28 Python
python实现扑克牌交互式界面发牌程序
2020/04/22 Python
python实现文件分片上传的接口自动化
2020/11/19 Python
中国领先的专业家电网购平台:国美在线
2016/12/25 全球购物
皇家阿尔伯特瓷器美国官网:Royal Albert美国
2020/02/16 全球购物
银行会计职员个人的自我评价
2013/09/29 职场文书
求职信的要素有哪些呢
2013/12/26 职场文书
护理专业毕业生自荐信范文
2014/01/05 职场文书
开展党的群众路线教育实践活动总结报告
2014/10/31 职场文书
2015个人半年总结范文
2015/03/09 职场文书
2016年会领导致辞稿
2015/07/29 职场文书
运动会广播稿300字
2015/08/19 职场文书
教师外出学习心得体会
2016/01/18 职场文书
九年级化学教学反思
2016/02/22 职场文书
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js