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 数组循环引起的思考
Jan 01 Javascript
javascript Firefox与IE 替换节点的方法
Feb 24 Javascript
JavaScript中的字符串操作详解
Nov 12 Javascript
js实现双击图片放大单击缩小的方法
Feb 17 Javascript
JS实现自动变换的菜单效果代码
Sep 09 Javascript
javascript拖拽应用实例(二)
Mar 25 Javascript
前端 Vue.js 和 MVVM 详细介绍
Dec 29 Javascript
Vue组件实例间的直接访问实现代码
Aug 20 Javascript
vue注册组件的几种方式总结
Mar 08 Javascript
基于Vue的延迟加载插件vue-view-lazy
May 21 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
Mar 28 Javascript
vue-cli3.X快速创建项目的方法步骤
Nov 14 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
简单介绍下 PHP5 中引入的 MYSQLI的用途
2007/03/19 PHP
PHP表单递交控件名称含有点号(.)会被转化为下划线(_)的处理方法
2013/01/06 PHP
PHP strip_tags() 去字符串中的 HTML、XML 以及 PHP 标签的函数
2016/05/22 PHP
PHP中的密码加密的解决方案总结
2016/10/26 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
YII2框架中日志的配置与使用方法实例分析
2020/03/18 PHP
js 加载时自动调整图片大小
2008/05/28 Javascript
JavaScript 三种创建对象的方法
2009/10/16 Javascript
jquery获取复选框被选中的值
2014/04/10 Javascript
JavaScript导出Excel实例详解
2014/11/25 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
2016/08/06 Javascript
AngularJs html compiler详解及示例代码
2016/09/01 Javascript
JS简单去除数组中重复项的方法
2016/09/13 Javascript
详解Vue监听数据变化原理
2017/03/08 Javascript
JS简单获取当前日期和农历日期的方法
2017/04/17 Javascript
基于Node.js实现压缩和解压缩的方法
2018/02/13 Javascript
angularJs在多个控制器中共享服务数据的方法
2018/09/30 Javascript
深入了解Vue.js 混入(mixins)
2020/07/23 Javascript
[02:34]肉山说——泡妞篇
2014/09/16 DOTA
Python中的类与对象之描述符详解
2015/03/27 Python
浅谈Python 字符串格式化输出(format/printf)
2016/07/21 Python
Python设计模式之门面模式简单示例
2018/01/09 Python
tensorflow 中对数组元素的操作方法
2018/07/27 Python
Opencv实现抠图背景图替换功能
2019/05/21 Python
解决py2exe打包后,总是多显示一个DOS黑色窗口的问题
2019/06/21 Python
Python列表list常用内建函数实例小结
2019/10/22 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
英国时尚高尔夫服装购物网站:Trendy Golf
2020/01/10 全球购物
Windows和Linux动态库应用异同
2016/07/28 面试题
Linux操作面试题
2012/05/16 面试题
教育专业自荐书范文
2013/12/17 职场文书
大课间活动实施方案
2014/03/06 职场文书
2015年人力资源部工作总结
2015/04/30 职场文书
一个独生女的故事观后感
2015/06/04 职场文书
幼儿园教师培训心得体会
2016/01/21 职场文书
创业计划书之韩国烧烤店
2019/09/19 职场文书