js中this详解
this对象是在闭包一节中提到的,书上的原话是:“this对象是在运行时基于函数的执行环境绑定的,在全局函数中,this等于window,而当函数作为某个对象的方法调用时,this等于那个对象,匿名函数的执行环境具有全局性,因此其this对象通常指向window。”也可以理解为this是指向函数所处作用域中的对象,决定this的就是当前的执行环境所在的作用域。
下面是this的四种常见情况下的用法:
1,纯函数调用,此时的this就是全局环境下的window,访问到的this对象的属性就是全局环境下定义的,而不是函数内部定义的。
var a = 1;
function fn(){
var a = 0;
console.log(this.a)
};
fn(); //
同样的,如果直接在函数里面定义this的属性,那么也就相当于在全局下定义了window的属性。
var a = 1;
function fn(){
this.a = 0;
}; console.log(a); // 1; fn(); console.log(a); // 0;
这里就直接覆盖掉了原先定义的a
2,作为对象的方法来调用,此时的this对象就是指向调用它的那个对象(上级对象,离他最近的那个)
var a = 0
function fn(){
console.log(this.a)
};
var obj = {
a: 1
};
obj.test = fn;
obj.test(); //
3,作为构造函数调用,this就是指向生成的新对象
function fn(){
this.a = 1
};
var o = new fn();
o.a; //
此时的this不指向window
var a = 0;
function fn(){
this.a = 1
};
var o = new fn();
o.a; //
a; //
此时并没有执行fn(),所以全局环境下的a没有改变
4,配合apply使用,此时的this就指向第一个参数,如果不传,就表示默认为全局环境
var x = 0; function test(){ alert(this.x); } var o={}; o.x = 1; o.m = test; o.m.apply(); //0
o.m.apply(o); //
当this所在的函数还没被调用的时候,this的指向是不明确的,只有被调用的时候,this才会明确所指对象,指向的是调用这个函数的对象。
一,下面来看几个例子
function fn(){
user: "Yan",
console.log(this.user)
console.log(this);
} fn();
// undefined
// window
其实上面等同于下面这个:
window.fn();
这里fn()是被window对象调用的,作用域是全局环境下,所以这里的this指向window,而user在全局下未被定义;
再看一个更清楚的
var o = {
user: 'Yan',
fn: function(){
console.log(this.user);
console.log(this);
}
};
o.fn();
// Yan
// {user: 'Yan', fn: f}
这里调用fn()的是o这个对象,所以此时的this指向o。
那如果是下面这种情况呢:
window.o.fn();
结果是跟上面那个一样,为什么呢?这里我们把最初的定义再说具体一点,
this对象始终指向的是直接调用它的对象,这个对象就是它的上一级,就是最终输出的时候,a.fn()就是a,b.fn()就是b。。。
下面这个例子也能很好的说明上面这段话:
var o = {
user: 'Yan',
a: {
user: 'Chen',
fn: function(){
console.log(this.user);
console.log(this);
}
}
};
o.a.fn();
// Chen
// {user: 'Chen', fn: f}
如果上面这个稍作改动,结果如何呢,来看:
var j = o.a;
j.fn();
答案是还是一样的,因为这里的fn()是被对象j调用的,而对象j是o.a的复制,引用类型的复制,所以fn()被调用的还是a,所以this依然指向a
但是下面这种情况就比较特殊了,来看:
var h = o.a.fn;
h();
// undefined
// window
为什么这里的指向不是a了,因为h相当于复制了fn这个方法,而此时h()就等同于window.h(),那么此时的this指向的就是它的调用对象window。
二,当this遇到构造函数的时候
这个又要另当别论了,直接先看代码:
function fn(){
this.user = 'Yan'
}
var a = new fn();
console.log(a.user);
// Yan
new关键字可以改变this的指向对象,这里的new创建了一个fn的实例a,相当于在a里面复制了一个fn,当执行a.user的时候,实际上就是指向的a,因为fn是a调用的。
三,当this遇到return的时候
先把结论说了,当return一个对象的时候(null除外),this指向的就是那个返回的对象,如果不是对象,指向的就还是原函数的实例。
function fn()
{
this.user = 'Yan';
return {
user: 'Chen'
}
}
var a = new fn;
console.log(a.user); // Chen
function fn()
{
this.user = 'Yan';
return function(){};
}
var a = new fn;
console.log(a.user); // undefined
null除外:
function fn()
{
this.user = 'Yan';
return null;
}
var a = new fn;
console.log(a.user); // Yan
不是对象的时候:
function fn()
{
this.user = 'Yan';
return 1;
}
var a = new fn;
console.log(a.user); // Yan
function fn()
{
this.user = 'Yan';
return undefined;
}
var a = new fn;
console.log(a.user); // Yan
==========================
2018年7月3日补充
当一个函数被调用时,会创建一个活动记录(有时候称为执行上下文),这个记录包含函数在哪里被调用(调用栈)、函数的调用方式以及传入的参数等信息,this就是这个记录的一个属性,会在函数执行的过程中用到。
this既不指向函数自身也不指向函数作用域,它是在函数被调用时绑定的,指向什么完全取决于函数在哪里被调用。
箭头函数本身没有this,取而代之的是当前的词法作用域覆盖了this本来的值。
js中this详解的更多相关文章
- js中eval详解,用Js的eval解析JSON中的注意点
先来说eval的用法,内容比较简单,熟悉的可以跳过eval函数接收一个参数s,如果s不是字符串,则直接返回s.否则执行s语句.如果s语句执行结果是一个值,则返回此值,否则返回undefined. 需要 ...
- js中arguments详解
在js中一切都是对象,连函数也是对象,函数名其实是引用函数定义对象的变量. 什么是arguments? 这个函数体内的arguments非常特殊,实际上是所在函数的一个内置类数组对象,可以用数组的[i ...
- Node.js中Async详解:流程控制
安装 npm install async --save 地址 https://github.com/caolan/async Async的内容主要分为三部分 流程控制: 简化九种常见的流程的处理 集合 ...
- js中apply详解
学习http://www.cnblogs.com/delin/archive/2010/06/17/1759695.html 1.对象的继承,一般的做法是复制:Object.extend protot ...
- Angular JS 中 指令详解
Angular JS的强大功能就在于其可以自定义很多指令,现在就指令做一下详细的剖析. 一个Angular js 指令(directive)需要指定一个唯一的名字(myDirective)和一个函数, ...
- js中eval详解
先来说eval的用法,内容比较简单,熟悉的可以跳过 eval函数接收一个参数s,如果s不是字符串,则直接返回s.否则执行s语句.如果s语句执行结果是一个值,则返回此值,否则返回undefined. ...
- 《Node.js开发实战详解》学习笔记
<Node.js开发实战详解>学习笔记 ——持续更新中 一.NodeJS设计模式 1 . 单例模式 顾名思义,单例就是保证一个类只有一个实例,实现的方法是,先判断实例是否存在,如果存在则直 ...
- Js apply 方法 详解
Js apply方法详解 我在一开始看到JavaScript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这 ...
- ES6,ES2105核心功能一览,js新特性详解
ES6,ES2105核心功能一览,js新特性详解 过去几年 JavaScript 发生了很大的变化.ES6(ECMAScript 6.ES2105)是 JavaScript 语言的新标准,2015 年 ...
随机推荐
- chromedriver与chrome版本映射列表
chromedriver与chrome版本映射列表: chromedriver版本 支持的Chrome版本 v2.30 v58-60 v2.29 v56-58 v2.28 v55-57 v2.27 v ...
- Git-分布式版本控制系统(二)
工作区(Woring directory ) 版本区(repository,即隐藏的.git文件) Git的版本库里存了很多东西,其中最重要的就是称为stage(或者叫index)的暂存区,还有Git ...
- Python多线程编程(第二篇)
一.Python中的上下文管理器(contextlib模块) 上下文管理器的任务是:代码块执行前准备,代码块执行后收拾 1.如何使用上下文管理器: 如何打开一个文件,并写入"hello wo ...
- 【转载】LINUX上MYSQL优化三板斧
现在MySQL运行的大部分环境都是在Linux上的,如何在Linux操作系统上根据MySQL进行优化,我们这里给出一些通用简单的策略.这些方法都有助于改进MySQL的性能. 闲话少说,进入正题. 一. ...
- Chris Richardson微服务翻译:微服务架构中的服务发现
Chris Richardson 微服务系列翻译全7篇链接: 微服务介绍 构建微服务之使用API网关 构建微服务之微服务架构的进程通讯 微服务架构中的服务发现(本文) 微服务之事件驱动的数据管理 微服 ...
- CubeMX使用及感受
简介 CubeMX这几年刚流行起来,是一个STM32代码的初始化配置工具,里面封装了硬件层.中间层,以及示例代码. cube使用 该软件的安装需要较高版本jdk支持,固件库安装时需要注意和主程序的版本 ...
- myeclipse 扩展内存大小
工具中修改设置Default VM ArgumentsWindows-> Preferences->Java->Installed JREs,点击右侧的jdk,然后点击"E ...
- 大数据分析中Redis怎么做到220万ops
大数据时代,海量数据分析就像吃饭一样,成为了我们每天的工作.为了更好的为公司提供运营决策,各种抖机灵甚至异想天开的想法都会紧跟着接踵而来!业务多变,决定了必须每天修改系统,重新跑数据,这就要求极高的海 ...
- 记录WEUI中滚动加载的一个BUG
最近写微信公众号,用到的技术栈是jq+vue的混合开发,采用的UI是移动端比较火的WEUI,在微信开发中应该较广泛.个人看惯了elementUI文档,相对于饿了么组件文档的详细,WEUI的文档还是比较 ...
- c#中常用集合类和集合接口之接口系列【转】
常用集合接口系列:http://www.cnblogs.com/fengxiaojiu/p/7997704.html 常用集合类系列:http://www.cnblogs.com/fengxiaoji ...