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第一课
Feb 27 Javascript
基于JQuery的一句话搞定手风琴菜单
Sep 14 Javascript
jQuery 中$(this).index与$.each的使用指南
Nov 20 Javascript
javascript实现按回车键切换焦点
Feb 09 Javascript
javascript中基本类型和引用类型的区别分析
May 12 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
Dec 02 Javascript
使用伪命名空间封装保护独自创建的对象方法
Aug 04 Javascript
jQuery+ajax读取并解析XML文件的方法
Sep 09 Javascript
9个让JavaScript调试更简单的Console命令
Nov 14 Javascript
关于layui的动态图标不显示的解决方法
Sep 04 Javascript
Vue自定义表单内容检查rules实例
Oct 30 Javascript
Vue3实现简易音乐播放器组件
Aug 14 Vue.js
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
德生1994机评
2021/03/02 无线电
Content-type 的说明
2006/10/09 PHP
谈谈新手如何学习PHP
2006/12/14 PHP
php实现的支持imagemagick及gd库两种处理的缩略图生成类
2014/09/23 PHP
PHP整合七牛实现上传文件
2015/07/03 PHP
Yii2中YiiBase自动加载类、引用文件方法分析(autoload)
2016/07/25 PHP
php array_walk_recursive 使用自定的函数处理数组中的每一个元素
2016/11/16 PHP
php 策略模式原理与应用深入理解
2019/09/25 PHP
Javascript浮点数乘积运算出现多位小数的解决方法
2014/02/17 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
2015/09/01 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
2015/10/26 Javascript
最简单的tab切换实例代码
2016/05/13 Javascript
第一次接触神奇的Bootstrap基础排版
2016/07/26 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
Node.JS更改Windows注册表Regedit的方法小结
2017/08/18 Javascript
浅谈angular4 ng-content 中隐藏的内容
2017/08/18 Javascript
js实现手机web图片左右滑动效果
2017/12/29 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
2020/09/12 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
[55:44]OG vs NAVI 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python数据结构之链表的实例讲解
2017/07/25 Python
tensorflow更改变量的值实例
2018/07/30 Python
Python中的Socket 与 ScoketServer 通信及遇到问题解决方法
2019/04/01 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
tensorflow 2.1.0 安装与实战教程(CASIA FACE v5)
2020/06/30 Python
Sneaker Studio捷克:购买运动鞋
2018/07/08 全球购物
Nike挪威官网:Nike.com (NO)
2018/11/26 全球购物
美国购买隐形眼镜网站:Lenses For Less
2020/07/05 全球购物
Weblogic和WebSphere不同特点
2012/05/09 面试题
赞美老师的演讲稿
2014/05/22 职场文书
学习十八届四中全会依法治国心得体会
2014/11/03 职场文书
2015欢度元旦标语口号
2014/12/09 职场文书
高校教师个人工作总结2014
2014/12/17 职场文书
布达拉宫的导游词
2015/02/02 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书
MySQL外键约束(Foreign Key)案例详解
2022/06/28 MySQL