上一章我们排除了一些对this的错误认识和知道了this是在调用函数时被绑定的,完全取决于函数的调用位置。先介绍两个概念:调用位置和调用栈。

调用栈:就是为了到达当前执行位置所调用的所有函数。

调用位置:在当前正在执行的函数的前一个调用中。即函数在代码中的调用位置而不是声明的位置。

function baz() {
//当前调用栈是baz
//因此,当前调用位置是全局作用域
bar(); //bar的调用位置
}
function bar() {
//当前调用栈是baz->bar
//因此,当前的调用位置是baz中
foo(); //foo的调用位置
}
function foo() {
//当前的调用栈是baz->bar->foo
//因此,当前的调用位置是bar中
}
baz(); //baz的调用位置

绑定规则:

1.默认绑定:

对于独立调用的 函数,会进行默认绑定。看下面的代码:

 function foo() {
console.log(this.a);
}
var a =2;
foo(); //2

非严格模式下,独立调用的 函数,会进行默认绑定,this指向全局对象。上面的代码foo()的调用位置是全局,在全局对象中定义了一个属性a,因此this.a 为2。

2.隐式绑定

调用位置是否有上下文对象,或者说是否被某个对象包含或者拥有

    function foo2() {
console.log(this.a);
}
var obj = {
a:3,
foo3:foo2
};
obj.foo3(); //

调用位置使用obj上下文引用函数,即函数被调用时被obj对象拥有或包含。

当函数引用上下文对象时,隐式绑定会把函数调用中的this绑定到这个上下文对象。

对象属性引用链中只有最后一层在调用位置中起作用。看下面代码:

    function foo() {
console.log(this.a);
}
var obj2 = {
a:23,
foo:foo
}
var obj1 = {
a:98,
obj2:obj2
}
obj1.obj2.foo(); //

3.显示绑定

因为隐式绑定时,我们必须在对象内部包含一个指向函数的属性,并通过属性指引这个函数,从而把this间接(隐式)的绑定到这个对象上。如果想在对象上强制调用函数,可以通过call(...)和apply(...)方法。这个两个方法的第一个参数是一个对象,是给this准备的,函数调用将this绑定在该对象上。这两个方法的原理相同只是里面的参数不同。

    function foo() {
console.log(this.a);
}
var obj ={
a:89
}
foo.call(obj); //

4.new绑定

js也有一个new操作符,使用方法看起来和那些面向类语言一样,其实js中的new操作符的机制实际上和面向类语言完全不同。js中,构造函数只是使用new操作符调用的函数。

使用new来调用函数,或者说发生构造函数调用时,会自动执行下面的操作

1.创建(或者说构造)一个新的对象。

2.这个新对象会被执行[[prototype]]链接。

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

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

    function Foo(a) {
this.a = a;
}
var bar = new Foo(2);
console.log(bar.a); //2

判 断this

根据优先级来判断函数在某个调用位置应运的是那条规则

1.函数是否在new中调用(new绑定)?如果是的话this绑定的是新创建的对象。

var bar = new Foo();

2.函数是否通过apply,call显示绑定,如果是的话,this绑定的就是指定的对象。

var bar= foo.call(obj);

3.函数是否在某个上下文中调用(隐式调用)?如果是的话,this绑定就是那个上下文对象。

var bar = obj.foo();

4.如果都不是的话,使用默认绑定。严格模式下,就绑定到undefined,否则就是全局对象

var bar =  foo()

JavaScript中的 this全面解析的更多相关文章

  1. JavaScript中依赖注入详细解析

    计算机编程的世界其实就是一个将简单的部分不断抽象,并将这些抽象组织起来的过程.JavaScript也不例外,在我们使用JavaScript编写应用时,我们是不是都会使用到别人编写的代码,例如一些著名的 ...

  2. javascript中 json数据的解析与序列化

    首先明确一下概念: json格式数据本质上就是字符串: js对象:JavaScript 中的几乎所有事务都是对象:字符串.数字.数组.日期.函数,等等. json数据的解析: 就是把后端传来的json ...

  3. javaScript中的this关键字解析

    this是JavaScript中的关键字之一,在编写程序的时候经常会用到,正确的理解和使用关键字this尤为重要.接下来,笔者就从作用域的角度粗谈下自己对this关键字的理解,希望能给到大家一些启示, ...

  4. javascript中有关this的解析题

    1.作用域链 作用域:浏览器给js一个生存环境(栈)内存 作用域链:js中的关键字var function 都可以提前声明和定义,提前声明和定义,放在我们的内存地址(堆)内存中,然后js从上到下逐行执 ...

  5. JavaScript中使用eval()方法解析json串

    最近在js用到了eval()方法,在这里做个笔记 当时是这么用的:data = eval("("+data+")"); data为后台向前台传送的一个json串 ...

  6. 前端开发:Javascript中的数组,常用方法解析

    前端开发:Javascript中的数组,常用方法解析 前言 Array是Javascript构成的一个重要的部分,它可以用来存储字符串.对象.函数.Number,它是非常强大的.因此深入了解Array ...

  7. 深入解析Javascript中this关键字的使用

    深入解析Javascript中面向对象编程中的this关键字 在Javascript中this关键字代表函数运行时,自动生成的一个内部对象,只能在函数内部使用.比如: function TestFun ...

  8. [JavaScript] JS中对Base64的解析

    JS中对Base64的解析 <script type="text/javascript"> /** * UTF16和UTF8转换对照表 * U+00000000 – U ...

  9. 解析JavaScript中apply和call以及bind

    函数调用方法 在谈论JavaScript中apply.call和bind这三兄弟之前,我想先说下,函数的调用方式有哪些: 作为函数 作为方法 作为构造函数 通过它们的call()和apply()方法间 ...

随机推荐

  1. Http的缓存机制

    最近参加一个面试,被面试官问到http的缓存机制,发现自己并不熟悉,于是这篇博客诞生了. HTTP是超文本传输协议,从万维网服务器传输文本到本地浏览器的传送协议,基于TCP/IP通信协议传递数据 HT ...

  2. 创建第一次C语言程序

    在这里我以VS2015为例,做演示.为什么要去演示怎样创建项目尼,因为我写第一个程序时,不知道该怎样用VS创建我的第一个应用程序. 第一步:打开VS环境如下 第二步:在开始出点击“新建项目”或在右上角 ...

  3. 73. Set Matrix Zeroes 把矩阵同一行列的元素都改成0

    [抄题]: Given a m x n matrix, if an element is 0, set its entire row and column to 0. Do it in-place. ...

  4. [leetcode]34.Find First and Last Position of Element in Sorted Array找区间

    Given an array of integers nums sorted in ascending order, find the starting and ending position of ...

  5. golang环境 centos 7

    https://blog.csdn.net/ggq89/article/details/82682171  Linux下Go的安装.配置 .升级和卸载 https://blog.csdn.net/we ...

  6. python基础之Day11

    一.函数是对象 函数是第一类对象的含义是函数可以被当作数据处理 二.函数的嵌套定义 def f1(): def f2(): print('from f2') f2()f1() 三.名称空间与作用域 1 ...

  7. 用ps增加照片的气氛--镜头光晕

    1.寻找一张图片 2.新建一个图层填充为黑色 3.选择滤镜---渲染---镜头光晕 4.选择图层模式---滤色. ​ 编辑:千锋UI设计

  8. Linux 第五天

    网络命令 1)write 给在线用户发信息(需按Crtl+D保存结束,w命令可看在线用户) 语法:write 用户名 2)wall 发广播信息 英文原意:write all 语法:wall 信息 3) ...

  9. python模块:datetime

    # Stubs for datetime # NOTE: These are incomplete! import sys from typing import Optional, SupportsA ...

  10. 过滤器(Filter)、拦截器(Interceptor)、监听器(Listener)

    一.Filter 过滤器 1.简介 Filter也称之为过滤器,它是Servlet技术中最实用的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servle ...