首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在这段代码中,为什么" this“最终被绑定到窗口对象而不是数组b?

在这段代码中,"this"最终被绑定到窗口对象而不是数组b的原因是因为在JavaScript中,函数的执行上下文(execution context)决定了函数内部的"this"的值。

当函数被调用时,"this"的值取决于函数的调用方式。在这段代码中,如果没有使用特殊的绑定规则,函数将使用默认的绑定规则。

默认的绑定规则是,如果函数是作为全局函数调用的,那么"this"将绑定到全局对象(在浏览器环境中通常是窗口对象)。在这种情况下,"this"最终被绑定到窗口对象。

示例代码如下:

代码语言:txt
复制
function foo() {
  console.log(this);
}

var b = [1, 2, 3];
foo(); // 输出窗口对象

如果我们想将"this"绑定到数组b,可以使用函数的"call"或"apply"方法来显式地指定函数的执行上下文。示例代码如下:

代码语言:txt
复制
function foo() {
  console.log(this);
}

var b = [1, 2, 3];
foo.call(b); // 输出数组b

在这个例子中,通过使用"call"方法并传递数组b作为参数,我们将"this"绑定到了数组b,所以最终输出的是数组b。

需要注意的是,这只是JavaScript中"this"的默认绑定规则,实际上还有其他的绑定规则,如隐式绑定、显式绑定、new绑定等。具体的绑定规则会根据函数的调用方式而有所不同。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

C++【多态】

,实现不同的方法,因此 多态 的实现依赖于 继承 同一个售票地点,为不同的购票方式提供了不同的取票窗口(多种状态 -> 多态) ---- ️正文 1、多态基本概念 使用多态的代码,不同对象完成同一件事会产生不同的结果...,可以看到涉及虚函数类的对象中都有属性 __vfptr(虚表指针),可以通过虚表指针所指向的地址,找到对应的虚表 虚函数表存储的是虚函数指针,可以调用函数时根据不同的地址调用不同的方法 在下面这段代码...&s); return 0; } 显然,虚表地址与常量区的地址十分接近,因此可以推测 虚表位于常量区,因为它需要被同一类的不同对象共享,同时不能修改(如同代码一样) 函数代码也是位于 常量区...;动态绑定是虚函数的调用过程,需要 虚表指针+虚表,程序运行时,根据不同的对象调用不同的函数 ---- 5、单继承与多继承的虚表 5.1、单继承的虚表 单继承的虚表比较简单,无非就是 子类的虚函数对父类相应的虚函数进行覆盖...5.2.2、冗余虚函数的调用问题 在上面的多继承多态代码,子类分别重写了两个父类的 func1 函数,但最终通过监视窗口发现:同一个函数两张虚表的地址不相同 因此可以推测:编译器调用时,根据不同的地址寻找到同一函数

14130

37个JavaScript基本面试问题和解答(建议收藏)

这种行为也认为是遵循了JavaScript中将一行开头大括号放在行尾的约定,不是新行的开头。如此处所示,这不仅仅是JavaScript的一种风格偏好。 7、什么是NaN?它的类型是什么?...因此,“1”变为1,然后应用 - 时将其变为-1,然后将其加1产生0,然后转换为字符串并与最终的“2”操作数连接,产生“02”。...ES2015上下文中,您可以原始代码简单地使用let不是var: for (let i = 0; i < 5; i++) { setTimeout(function() { console.log...它也可以作为window.length或length或this.length来访问(当这个===窗口时)。 方法绑定Object obj,obj.method用参数fn和1调用。...b)在这里,a [6]将输出未定义的值,但时隙仍为空,不是未定义的。某些情况下,这可能是一个重要的细微差别。

3K10
  • 读书笔记-你不知道的JavaScript(上)

    动态作用域 动态作用域只关心它们从何处调用。换句话说,作用域链是基于调用栈的,不是代码的作用域嵌套。...函数执行的过程,可以根据下面这4条绑定规则来判断 this 绑定哪。...默认绑定 独立函数调用 隐式绑定 当函数引用有上下文对象时,隐式绑定规则会把函数调用的 this 绑定这个上下文对象 显示绑定 call/apply bind(本质是对call/apply...函数是否某个上下文对象调用(隐式绑定)?如果是的话,this 绑定的是那个上下文对象。 如果都不是的话,使用默认绑定严格模式下,绑定 undefined,否则绑定全局对象。...如果某个函数(比如第三库的某个函数)确实使用了 this ,默认绑定规则会把 this 绑定全局对象,这将导致不可预计的后果。

    1K100

    你不知道的this(2)

    : 调用位置就是函数代码调用的位置(不是声明的位置)。...为什么?因为本例,函数调用时应用了this的默认绑定,因此this默认指向全局对象。 那么我们怎么知道这里应用了默认绑定?...使用的硬绑定函数来说,这段polyfill代码和ES5内置的bind(..)函数并不完全相同(后面会介绍为什么要在new中使用硬绑定函数)。...),不过简单来说,这段代码会判断硬绑定函数是否是new调用,如果是的话就会使用新创建的this替换硬绑定的this。...那么,为什么要在new中使用硬绑定函数呢?直接使用普通函数不是更简单吗?之所以要在new中使用硬绑定函数,主要目的是预先设置函数的一些参数,这样使用new进行初始化时就可以只传入其余的参数。

    51410

    【前端进阶】深入浅出 JavaScript 的 this

    一个程序只会有一个全局执行上下文 函数执行上下文 — 每当一个函数调用时, 都会为该函数创建一个新的上下文。每个函数都有它自己的执行上下文,不过是函数调用时创建的。...为什么要用 this this 是在运行时进行绑定的,并不是在编写时绑定,它的上下文取决于函数调 用时的各种条件 牢记:this 的绑定和函数声明的位置没有任何关系,只取决于函数的调用方式 当一个函数调用时...当函数引用有上下文对象时,隐式绑定规则会把函数调用的 this 绑定这个上下文对象。... bind() 则是创建一个新的包装函数,并且返回,不是立刻执行 bind(this, arg1, arg2, ...)...绑定那个上下文对象 默认:严格模式下绑定 undefined,否则绑定全局对象 如下图所示: 参考 [译] 理解 JavaScript 的执行上下文和执行栈 你不知道的JavaScript上卷

    38820

    多态

    return 0; } 通过上面的代码和调试信息可以看出,派生类,虚表的print重写成studen类的。...动态绑定,静态绑定 静态绑定: 编译的时候就确定地址,比如:函数重载,模板 动态绑定 运行的时候去找地址,比如多态 显然上述的代码就是动态绑定程序运行起来之后,去找print的地址。...我们知道只要是虚函数都会放在虚函数表,但是vs的窗口不能显示出来。...静态的成员不能是虚函数,静态成员没有*this指针,静态函数只能用类域的方式调用,虚函数的调用需要在虚函数表调用。 构造函数和拷贝构造函数不能是虚函数。...因为虚函数是放在虚函数表虚表指针是构造函数初始化列表初始化的。

    25620

    最近美团前端面试题目整理

    ,最后返回的结果是扁平化的结果,这段代码核心就是循环遍历过程的递归操作,就是遍历过程中发现数组元素还是数组的时候进行递归操作,把数组的结果通过数组的 concat 方法拼接到最后要返回的 result...不是都说原始类型是存放在栈上的么,为什么此时却没有销毁掉?接下来笔者会根据浏览器的表现来重新理解关于原始类型存放位置的说法。...只有在下图的场景,原始类型才可能是存储栈上。这里为什么要说可能,是因为 JS 是门动态类型语言,一个变量声明时可以是原始类型,马上又可以赋值为对象类型,然后又回到原始类型。...Hook; React 的函数组调用 Hook那为什么会有这样的限制呢?...那为什么不要在循环、条件或嵌套函数调用 Hook 呢?因为 Hooks 的设计是基于数组实现。调用时按顺序加入数组,如果使用循环、条件或嵌套函数很有可能导致数组取值错位,执行错误的 Hook。

    55830

    那些高级前端是如何回答面试题的_2023-02-28

    当然事件委托不是只有优点,它也是有缺点的,事件委托会影响页面性能,主要影响因素有: 元素绑定事件委托的次数; 点击的最底层元素,绑定事件元素之间的DOM层数; 必须使用事件委托的地方,可以进行如下的处理...第一种情况是由于使用未声明的变量,意外的创建了一个全局变量,而使这个变量一直留在内存无法回收。...第二种情况是设置了 setInterval 定时器,忘记取消它,如果循环函数有对外部变量的引用的话,那么这个变量会被一直留在内存,而无法回收。...Static 关键字有了解嘛 为这个类的函数对象直接添加方法,不是加在这个函数对象的原型对象上 如果一个构造函数,bind了一个对象,用这个构造函数创建出的实例会继承这个对象的属性吗?为什么?...另一种是对需要插入 HTML 代码做好充分的转义。对于 DOM 型的攻击,主要是前端脚本的不可靠造成的,对于数据获取渲染和字符串拼接的时候应该对可能出现的恶意代码情况进行判断。

    70410

    高级前端开发者必会的34道Vue面试题系列(二)

    从一段基础代码入手 下面这段代码非常简单,编写过Vue的同学都能看懂它在干什么,但是你能准确的说出这段代码第一秒,第二秒,第三秒页面上分别有什么变化吗? <!...当执行这段代码后,页面第一秒和第二秒无变化,直到第三秒时候才会发生变化,思考一下第一秒和第二秒改变了list的值,为什么Vue的双向绑定在这里失效了呢?...b、回到文章开始示例的那一段Vue代码里的实现,我改变了Vue的data下list的下标属性值,页面是没有响应变化的,但是这里我改了list的内的值从15,页面响应了,这又是怎么回事?...从上面代码里,首先监听了model数组里所有的属性,然后通过各种数组的方法来修改当前数组,得出以下几个结论。 1、直接修改数组已有的元素是可以监听的。...至于为什么不用Object.defineProperty去监听数组已存在的元素变化。 作者尤雨溪的考虑是因为性能原因,给每一个数组元素绑定上监听,实际消耗很大,受益并不大。

    1.1K30

    总结一下最近前端面试问到的题目吧

    产生乱码的原因:网页源代码是gbk的编码,内容的中文字是utf-8编码的,这样浏览器打开即会出现html乱码,反之也会出现乱码;html网页编码是gbk,程序从数据库调出呈现是utf-8编码的内容也会造成编码乱码...管道就是操作系统在内核开辟的一段缓冲区,进程1可以将需要交互的数据拷贝这段缓冲区,进程2就可以读取了。...(5)共享内存通信共享内存就是映射一段能其他进程所访问的内存,这段共享内存由一个进程创建,但多个进程都可以访问(使多个进程可以访问同一块内存空间)。...BOM的核心是 window, window 对象具有双重角色,它既是通过 js 访问浏览器窗口的一个接口,又是一个 Global(全局)对象。...0:'one', 1:'two', length: 2};obj = Array.from(obj);for(var k of obj){ console.log(k)}如果不是数组对象

    43740

    说说这个this啊

    (); //3 本例,函数A作为obj的A属性的值,严格来说,obj并不包含A函数,但是它保有对A函数的引用,当obj调用A方法时,隐式绑定规则将this绑定到了obj上,所以this.a就是...var obj = { a:3, A:A}B(obj.A); //2 本例,obj.A作为参数传递给了函数B,其实函数A最终调用的位置是fn(),此时的fn是没有函数修饰的,上述代码相当于.../otherthing 当时看到这段代码,立即想到了eventLoop,当执行setTimeout时,先将回调函数注册,1000ms后将函数推入事件队列,然后检查主线程即调用栈是否为空,如果为空,将队列里的函数按照先入先出原则...显式绑定绑定 js,可以通过一些方法来改变this的指向,《你不知道的js》里被称为硬绑定,这些方法有apply,call,bind。 apply 此方法会执行函数。...也就是说,表达式new o.m(),this并不是o 12345678 var obj = { a: function(){ return this; }}var o =

    85090

    34道Vue面试题系列:Vue如何检测数组变化?

    从一段基础代码入手 下面这段代码非常简单,编写过Vue的同学都能看懂它在干什么,但是你能准确的说出这段代码第一秒,第二秒,第三秒页面上分别有什么变化吗? <!...当执行这段代码后,页面第一秒和第二秒无变化,直到第三秒时候才会发生变化,思考一下第一秒和第二秒改变了list的值,为什么Vue的双向绑定在这里失效了呢?...b、回到文章开始示例的那一段Vue代码里的实现,我改变了Vue的data下list的下标属性值,页面是没有响应变化的,但是这里我改了list的内的值从15,页面响应了,这又是怎么回事?...从上面代码里,首先监听了model数组里所有的属性,然后通过各种数组的方法来修改当前数组,得出以下几个结论。 1、直接修改数组已有的元素是可以监听的。...至于为什么不用Object.defineProperty去监听数组已存在的元素变化。 作者尤雨溪的考虑是因为性能原因,给每一个数组元素绑定上监听,实际消耗很大,受益并不大。

    2.8K60

    2022必会的vue高频面试题(附答案)

    Object.defineProperty 本身有一定的监控数组下标变化的能力,但是 Vue ,从性能/体验的性价比考虑,尤大大就弃用了这个特性(Vue 为什么不能检测数组变动 )。...key 是为 Vue vnode 的唯一标记,通过这个 key,我们的 diff 操作可以更准确、更快速更准确:因为带 key 就不是就地复用了, sameNode 函数 a.key === b.key...Vue 为什么要用 vm.$set() 解决对象新增属性不能响应的问题 ?你能说说如下代码的实现原理么?1)Vue为什么要用vm....你可以把⼀些视图逻辑放在⼀个ViewModel⾥⾯,让很多view重⽤这段视图逻辑提⾼可测试性: ViewModel的存在可以帮助开发者更好地编写测试代码⾃动更新dom: 利⽤双向绑定,数据更新后视图⾃...数据绑定使得⼀个位置的Bug快速传递别的位置,要定位原始出问题的地⽅就变得不那么容易了。

    2.8K40

    前端冲刺必备指南-执行上下文作用域链闭包一等公民

    (这里的标识符是指变量/函数的名称,变量是对实际对象(包括函数对象数组对象)或原始值的引用) 词法环境由一个环境记录和可能为空引用(Null)的外部词法环境组成。...对象环境记录(绑定对象),全局代码的词法环境包含一个客观环境记录,除了变量和函数声明外,对象环境记录还存储全局绑定对象。so,对于每个绑定对象的属性,将在记录创建一个新的条目。...不同作用域的变量对象互不相同,它保存了当前作用域的所有函数和变量。 只有函数声明会被加入变量对象函数表达式不会。...它允许你为异步操作的成功和失败分别绑定相应的处理方法。这让异步方法可以像同步方法那样返回值,但并不是立即返回最终执行结果,而是一个能代表未来出现的结果的promise对象。...函数可以存储变量 函数可以存储为数组的一个元素 函数可以作为对象的成员变量 函数与数字一样可以使用时直接创建出来 函数可以传递给另一个函数 函数可以另一个函数返回 参考文献 How do JavaScript

    83810

    11期前端冲刺必备指南-执行上下文作用域链闭包一等公民

    对象环境记录(绑定对象),全局代码的词法环境包含一个客观环境记录,除了变量和函数声明外,对象环境记录还存储全局绑定对象。so,对于每个绑定对象的属性,将在记录创建一个新的条目。...不同作用域的变量对象互不相同,它保存了当前作用域的所有函数和变量。 只有函数声明会被加入变量对象函数表达式不会。...它允许你为异步操作的成功和失败分别绑定相应的处理方法。这让异步方法可以像同步方法那样返回值,但并不是立即返回最终执行结果,而是一个能代表未来出现的结果的promise对象。...垃圾回收,局部变量会随着函数的执行完毕销毁,除非还有指向他们的引用。当闭包本身垃圾回收后,闭包的私有状态随后也会被垃圾回收。...函数可以存储变量 函数可以存储为数组的一个元素 函数可以作为对象的成员变量 函数与数字一样可以使用时直接创建出来 函数可以传递给另一个函数 函数可以另一个函数返回 参考文献 How do JavaScript

    87910

    前端面试中常考的源码实现

    实现的过程有个关键: 如果一个函数作为一个对象的属性,那么通过对象的.运算符调用此函数,this就是此对象 let obj = { a: "a", b: "b", test:...{ a: "a", b: "b" }, 1, 2 ); 实现 apply apply和call实现类似,只是传入的参数形式是数组形式,不是逗号分隔的参数序列...实现深拷贝函数 实现一个对象的深拷贝函数,需要考虑对象的元素类型以及对应的解决方案: 基础类型:这种最简单,直接赋值即可 对象类型:递归调用拷贝函数 数组类型:这种最难,因为数组的元素可能是基础类型、...value, {}); } else { target[key] = value; } } return target; } 这段代码不是比网上看到的多了很多...双向绑定:视图(View)的变化能实时让数据模型(Model)发生变化,数据的变化也能实时更新到视图层。 单向数据绑定:只有从数据视图这一方向的关系。

    35420

    小程序框架原理之渲染流程及通信流程

    如果想要查看调试 webview,只需选中 webview 打开它的调试工具即可,控制台输入以下代码: $$('webview')[0].showDevTools(true) 可以看到又打开了一个调试窗口.../wcc -d index.wxml >> index.js 可能有人很好奇为什么是生成 js 文件,不是 html 文件。原因很简单,因为需要处理 wxml 的动态绑定数据。...接下来回到 webview 调试窗口 head 内找到这段插入的 script 标签代码: image.png 有没有很熟悉,没错,就是和上面转换后的代码是同一个东西。...也就是说,我们的 wxml 文件通过编译,最终视图层执行的就是这段 js 代码(这里只是可以大概这么理解,实际需要向逻辑层获取数据才能渲染页面)。...,如果想要动态的绑定数据,调用 generateFunc 时传入一个数据对象

    3.7K31

    这样回答前端面试题才能拿到offer2

    需要注意的是,立即resolve()的 Promise 对象,是本轮“事件循环”(event loop)的结束时执行,不是在下一轮“事件循环”的开始时。...new 操作符可以帮助我们构建出一个实例,并且绑定上 this,内部执行步骤可大概分为以下几步:创建一个新对象对象连接到构造函数原型上,并绑定 this(this 指向新对象)执行构造函数代码(为这个新对象添加属性...,当构造函数最后 return 出来的是一个和 this 无关的对象时,new 命令会直接返回这个新对象不是通过 new 执行步骤生成的 this 对象但是这里要求构造函数必须是返回一个对象,如果返回的不是对象...,会生成执行环境,只要代码不是写在函数的,就是全局执行环境,函数代码会产生函数执行环境,只此两种执行环境。...,会影响对象的值,因为浅拷贝对引用类型的拷贝只是拷贝了地址,指向了内存同一个副本深拷贝function extendDeeply(p, c){ var c = c || {};

    48240
    领券