javaScript之this全面解析(2)

在理解this的绑定过程之前,我们先来理解调用位置(不是声明位置) ,最重要的是要分析调用栈(就是为了到达当前执行位置所调用的所有函数)。

我们关心的调用位置就在当前正在执行的函数的前一个调用中,例:

好了,调用位置我们已经找到了,然后我们来看看this绑定的四大规则

第一个规则:默认绑定(独立函数调用),可以把这条规则看做是无法应用其他规则时的默认规则,看代码

代码中foo()是直接使用不带有任何修饰的函数引用进行调用的,因此只能使用默认绑定,无法应用其他规则。如果使用严格模式(strict mode),

则不能将全局对象用于默认绑定,因此this会绑定到undefined。

第二个规则:隐式绑定

看代码

当函数引用有上下文对象时,隐式绑定规则会把函数调用的this绑定到这个上下文对象,因为调用foo时

this被绑定到obj,因此this.a和obj.a是一样的。对象属性引用链中只有上一层或者说最后一层在调用位置起作用

如:

隐式丢失:看代码

虽然bar是obj.foo的一个引用,但是实际上,它引用的是foo函数本身,因此此时的bar()其实是一个不带任何修饰的函数调用,因此应用了默认绑定。

参数传递其实就是一种隐式赋值,所以结果和上面结果一样

如果把函数传入语言内置的函数而不是传入你声明的函数,结果是一样的,没有区别

第三个规则:显示绑定

说到这里就不得不说call和apply函数了,那么他们是如何工作的呢?

他们的第一个参数是一个对象,是给this准备的,接着在调用函数时将其绑定到this。因为你可以直接指定this的绑定对象,因此称之为显示绑定

看代码:

如果你传入了一个原始值(字符串类型、布尔类型或者数字类型)来当做this的绑定对象,这个原始值会被转换成他的

对象形式(也就是new String(...)、new Boolean(...)或者new Number(...))。这通常被称为装箱。

硬绑定:方法1

方法2

由于硬绑定是一种非常常用的模式,所以es5提供了内置的方法function.prototype.bind,用法如下

规则四:new绑定

使用 new来调用函数,会自动执行以下操作:

1、创建一个全新的对象

2、这个新对象会被执行[[prototype]]连接

3、这个新对象会绑定到函数调用的this

4、如果函数没有返回其他对象,那么new表达式中的函数调用会自动返回这个新对象

看以下代码,new  this绑定

时间: 2024-08-01 00:28:26

javaScript之this全面解析(2)的相关文章

JavaScript : DOM文档解析详解

JavaScript DOM  文档解析 1.节点(node):来源于网络理论,代表网络中的一个连接点.网络是由节点构成的集合 <p title=“a gentle reminder”> Don’t forget to buy this stuff.</p> 节点及其类型 元素节点: 属性节点:元素的属性,可以直接通过属性的方式来操作 文本节点:元素节点的子节点,其内容通常为文本 2.Node接口的特性和方法 现在给出一个演示的HTML文件: html <!doctype h

Javascript Array 非常用方法解析

1. map var ary = Array(3); ary[0] = 2 ary.map(function(elem) { return '1'; }); 结果是["1", undefined * 2], 因为map 只能被初始化过的数组成员调用 2. reduce [].reduce(Math.pow): //typeError, 空数组上调用reduce [3,2,1].reduce(function(x, y) { console.log(x, y); return Math.

JavaScript的原生Ajax解析

通过JavaScript的Ajax进行详细的解析过程,从而更好的了解Jquery的Ajax. 顺带,我会在后面把我整理的一整套CSS3,PHP,MYSQL的开发的笔记打包放到百度云,有需要可以直接去百度云下载,这样以后你们开发就可以直接翻笔记不用百度搜那么麻烦了.  笔记链接:http://pan.baidu.com/s/1qYdQdKK 密码:pvj2   一.JavaScript原生ajax1.原生ajax代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

JavaScript之Ajax-4 XML解析(JavaScript中的XML、Ajax返回并解析XML)

一.JavaScript中的XML XML DOM对象 - IE 浏览器通过 ActiveXObject 对象得到 XML DOM 对象 - 其他浏览器通过 DOMParser 对象得到 XML DOM 对象 XML DOM对象的支持 - XML DOM(XML Document Object Model)定义了访问和操作XML文档的标准方法 - DOM 把 XML 文档作为树结构来查看.能够通过DOM树来访问所有元素 加载并解析XML字符串 二.Ajax返回并解析XML 使用XHR发送XML字

JavaScript的变量预解析特性

JavaScript是解释型语言是毋庸置疑的,但它是不是仅在运行时自上往下一句一句地解析的呢?事实上或某种现象证明并不是这样的,通过<JavaScript权威指南>及网上相关资料了解到,JavaScript有“预解析”行为.理解这一特性是很重要的,不然在实际开发中你可能会遇到很多无从解析的问题,甚至导致程序bug的存在.为了解析这一现象,也作为自己的一次学习总结,本文逐步引导你来认识JavaScript“预解析”,如果我的见解有误,还望指正.池州市贲生工艺品 我们先来看一个例子: var la

JavaScript自我学习之解析与执行

如果想要学好JavaScript那么我们首先必须要知道浏览器JavaScript引擎是如何解释执行JavaScript代码的,作为一名菜鸟,从自己学习JavaScript的过程来说,真心觉得不了解这些在以后的学习JavaScript过程中会徒增许多困惑,多走许多弯路.好了废话不多说了,我们就一起来看看到底怎么一个过程吧. 浏览器在执行JavaScript代码之前会进行类似写C和C++一样的预编译操作,在预编译的阶段,首先创建一个当前执行环境下的活动对象,并且将那些用 var 声明的变量设置为当前

Javascript Template 源码解析

之前的一篇文章,简单介绍过了javascript Template(以下简称tmpl).其作为一个前端模板,功能强大而代码精炼.源码不长,读起来不难,但其中的想法确实很犀利.这是github地址.下面先贴出全部源码,再逐句解析. 1 /* 2 * JavaScript Templates 2.4.1 3 * https://github.com/blueimp/JavaScript-Templates 4 * 5 * Copyright 2011, Sebastian Tschan 6 * ht

高性能JavaScript模板引擎原理解析

随着 web 发展,前端应用变得越来越复杂,基于后端的 javascript(Node.js) 也开始崭露头角,此时 javascript 被寄予了更大的期望,与此同时 javascript MVC 思想也开始流行起来.javascript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注,近一年来在开源社区中更是百花齐放,在 Twitter.淘宝网.新浪微博.腾讯QQ空间.腾讯微博等大型网站中均能看到它们的身影. 本文将用最简单的示例代码描述现有的 javascript 模板引擎

JavaScript日期格式化及解析

JavaScript开发经常需要对日期进行转换,把日期转成字符串或者从字符串生成日期.JavaScript日期对象内置了简单的日期格式化方法toString()和日期解析方法Date.parse(),这两个方法有较大的局限性,不能自定义自定义日期格式化和解析的字符串格式.下面列出一些常用的日期处理JS库. 名称 描述 Xdate XDate对Javascirpt本地Date对象进行了轻度包装,它提供对日期解析.格式化以及其他操作的加强功能,实现了本地Date对象的相同方法.https://git

&lt;JavaScript语言精粹&gt;JSON解析器源码阅读

1 // 这是一个用JavaScript编写JSON解析器的实现方案: 2 var jsonParser = (function() { 3 // 这是一个能把JSON文本解析成JavaScript数据结构的函数. 4 // 它是一个简单的递归降序解析器. 5 // 我们在另一个函数中定义此函数,以避免创建全局变量. 6 7 var at, // 当前字符索引 8 ch, // 当前字符 9 escapee = { 10 '"': '"', 11 "\\": &qu