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 缩图函数 (onDOMLoaded)……
Oct 23 Javascript
关于文本框的一些限制控制总结~~
Apr 15 Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
Sep 16 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
May 23 Javascript
javaScript使用EL表达式的几种方式
May 27 Javascript
Javascript快速排序算法详解
Dec 03 Javascript
jQuery替换textarea中换行的方法
Jun 10 Javascript
javascript实现任务栏消息提示的简单实例
May 31 Javascript
confirm确认对话框的实现方法总结
Jun 17 Javascript
Angular4 中内置指令的基本用法
Jul 31 Javascript
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
基于javascript的无缝滚动动画实现2
Aug 07 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 ajax 静态分页过程形式
2011/09/02 PHP
PHP中比较时间大小实例
2014/08/21 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
JavaScript 字符串乘法
2009/08/20 Javascript
JavaScript高级程序设计 客户端存储学习笔记
2011/09/10 Javascript
深入了解javascript中的prototype与继承
2013/04/14 Javascript
如何让DIV可编辑、可拖动示例代码
2013/09/18 Javascript
深入理解JavaScript中的对象
2015/06/04 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
js实现点击文本框显示日期选择器特效代码分享
2020/05/21 Javascript
zTree插件下拉树使用入门教程
2016/04/11 Javascript
举例讲解jQuery中可见性过滤选择器的使用
2016/04/18 Javascript
Bootstrap每天必学之折叠(Collapse)插件
2016/04/25 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
2016/07/08 Javascript
jQuery为动态生成的select元素添加事件的方法
2016/08/29 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
简单实现js悬浮导航效果
2017/02/05 Javascript
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
微信小程序自定义轮播图
2018/11/04 Javascript
js实现炫酷光感效果
2020/09/05 Javascript
Python备份Mysql脚本
2008/08/11 Python
解析Python中的变量、引用、拷贝和作用域的问题
2015/04/07 Python
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
解决sublime+python3无法输出中文的问题
2018/12/12 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
NYX Professional Makeup官方网站:专业彩妆和美容产品
2019/10/29 全球购物
在C#中如何实现多态
2014/07/02 面试题
《最大的麦穗》教学反思
2014/04/17 职场文书
厨师个人自我鉴定范文
2014/04/19 职场文书
领导班子专题民主生活会情况想汇报
2014/09/30 职场文书
优秀教研组申报材料
2014/12/26 职场文书
大学生党课心得体会
2016/01/07 职场文书
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis
码云(gitee)通过git自动同步到阿里云服务器
2022/12/24 Servers