JS的this本质

1、this究竟为何物?

1.1 全局上下文(Global context )

在全局运行上下文中(在任何函数体外部),this 指代全局对象window,无论是否在严格模式下。

 alert(this.document === document); // true

 alert(this === window); // true

 this.a = 37;
 alert(window.a); // 37

this默认就是指向window对象(window对象大家可以去看下DOM树,它是最顶级的)

1.2 顺便说下JS的"严格模式"和"非严格模式"

进入"严格模式"的标志,是下面这行语句:

"use strict";

详细介绍请看:http://www.ruanyifeng.com/blog/2013/01/javascript_strict_mode.html

2、函数上下文(Function context )

在函数内部,this的值取决于函数是如何调用的。

2.1 严格模式 和 非严格模式 下直接调用

function f1(){
  return this;//非严格模式下
}
alert(f1() == window); // true
function f2(){
  "use strict"; // 标记为严格模式
  return this;
}
alert(f2() == undefined);//true

2.2 作为对象方法

函数以对象里的方法的方式进行调用时,它们的this由调用该函数的对象进行设置。

下面的例子中,当o.f()被调用时,函数内的this即为o对象。

var o = {
  prop: 37,
  f: function() {
    return this.prop;
  }
};
alert(o.f()); //  37

注意,在何处或者如何定义调用函数完全不会影响到this的行为。在上一个例子中,我们在定义o的时候为其成员f定义了一个匿名函数。但是,我们也可以首先定义函数然后再将其附属到o.f。这样做this的行为也一致。

var o = {prop: 37};
function independent() {
  return this.prop;
}
o.f = independent;
alert(o.f()); //  37

下面的例子:this对象紧邻原则,不去找最大的,去找最近的对象(点前面所有的)

o.b = {g: independent, prop: 42};
alert(o.b.g()); // 42         此时this不看o对像,而是看0.b对象

2.3 作为一个构造函数

function C(){
  this.a = 37;
}

var o = new C();
alert(o.a); // 37

function C2(){
  this.a = 37;
  return {a:38};
}

o = new C2();
alert(o.a); // 38

在最后一个例子(函数C2),因为一个对象在返回期间创建,这个新对象被直接销毁(this.a)

JS的this本质

时间: 2024-08-10 21:28:44

JS的this本质的相关文章

js单线程的本质-------Event Loop

怎么判断是浏览器还是node环境? node中window是未定义:setImmediate是定义的,在浏览器中未定义 timer阶段:这个阶段会执行setTimeout和setInterval check阶段:执行setImmediate macro task [task] 宏任务 :script(页面代码).setTimeout.setInterval.I/O事件.UI交互事件(点击事件) micro  task [job] 微任务: Promise.process.nextTick.Pro

JS的运行机制

代码块: JS中的代码块是指由<script>标签分割的代码段.JS是按照代码块来进行编译和执行的,代码块间相互独立(即就算代码块1出错,但不影响代码块2的加载和执行),但变量和方法共享. 案例:2个代码块 <script type="text/javascript"> console.log("这是代码块一"); </script> <script type="text/javascript">

编写可维护的js代码-编程风格笔记

1.基本格式化 缩进层级:4个空格(把tab设成4个空格) 语句结尾:保留;(虽然分析器有自动分号插入机制) 行的长度:80个字符 空行:确保语义有关联的代码展现在一起 命名:变量和函数遵循小驼峰命名法,小写字母开始,后面每个单词首字母大写 变量命名前缀名词myName 函数命名前缀动词setName() 常量MAX_COUNT大写字母和下划线 构造函数大驼峰命名法AnotherName 直接量: 字符串:推荐" ",虽然和' '一样 整数和浮点数:8进制废弃 null:空对象指针 初

js运动

1,运动原理 Js运动,本质来说,就是让 web 上 DOM 元素动起来.而想要 DOM 动起来,改变其自身的位置属性,比如高宽,左边距,上边距,透明度等.动画的原理就是把不同状态的物体,串成连续的样子,就像一本书,画了几个小人,然后一翻书,就看见小人在动.js动画也一样.不同状态的DOM,用定时器控制,就能得到动画效果. window.onload = function(){ var oBtn = document.getElementById('btn'); oBtn.onclick = f

js函数的执行环境

js的函数本质上是一种对象,是对象就会有自己的环境(作用域),看下面的例子 var var1 = { message: "var1", getMessage: function () { alert(this.message); } }; var var2 = { message: "var2", getMessage:var1.getVar1 }; var2.getMessage(); 这段代码会输出 "var2".不对啊,应该是输出"

JS学习20(高级技巧)

高级函数 函数本质上是很简单且过程化的,但是由于JS天生的动态的特性,从使用方式上可以很复杂. 安全的类型检测 虽然JS中是有类型检测的,但是由于浏览器实现等它们并不完全可靠.比如typeof在Safari中对正则表达式也返回function. instanceof在存在多个全局作用域时也会把同种却不同作用域中构造函数的实例识别为不同的实例: var isArray = value instanceof Array; 这个表达式要是想返回true,value必须是个数组,且必须与Array构造函

React Native Android 从学车到补胎和成功发车经历

[工匠若水 http://blog.csdn.net/yanbober 未经允许严禁转载,请尊重作者劳动成果.私信联系我] 1 背景 好几个月没发车了,完全生疏了,为了接下来能持续性的发好车,这次先准备发个小车-- React Native.没错,就是这个从去年到现在官方都憋不出大招 1.0 版本,而被我朝开发者疯狂追捧备受争议的破车.怎么说呢,这玩意刚出来时有了解过,当时的内心是抵触的,但是内心总是架不住天朝的炒作能力,更架不住硬性指标,于是我就这么被 React Native 蹂躏了一番,也

客户端技术的一点思考(数据存储用SQLite, XMPP通讯用Gloox, Web交互用LibCurl, 数据打包用Protocol Buffer, socket通讯用boost asio)

今天看到CSDN上这么一篇< 彻底放弃没落的MFC,对新人的忠告!>, 作为一个一直在Windows上搞客户端开发的C++程序员,几年前也有过类似的隐忧(参见 落伍的感觉), 现在却有一些不同的想法. 首先,个人职业发展是否成功, 技术只是其中一小块,尤其是在大公司, 更多的是依靠所谓的软实力.作为一个对技术有追求的工匠,我们下面重点说技术相关的. 现在回头看计算机行业的发展,我们看到不同的发展阶段: 1. PC时代,这个时代离我们并不遥远, 也有是2000年前后, 该时代最鲜明的特征是Win

ES6-Set and Map

依赖文件地址 :https://github.com/chanceLe/ES6-Basic-Syntax/tree/master/js 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>[es6]-12-Set和Map结构</title> 6 <script src="./js/browser.js"