正文

关于this绑定的四种方式(代码片段)

xieqian  xieqian  2023-01-31  548

关键词：

一、前言

我们每天都在书写着有关于this的javascript代码，似懂非懂地在用着。前阵子在看了《你不知道的JavaScript上卷》之后，也算是被扫盲了一边关于this绑定的四种方式。

二、绑定规则

关于this应用的是哪条规则，得先找到调用的位置，再判断应用了哪条规则。

1、默认绑定

先上代码：

var a = 2;

function foo() 
    console.log(this.a);


foo(); // 结果：2

先来分析下上面的代码声明，

首先我们在全局作用域中定义了一个变量a，而在全局作用域声明的变量，就相当于为window对象声明了同名属性a并赋值为2，接着又在全局作用域下声明了foo函数，最后我们在调用foo函数时，是直接不带任何修饰下调用foo函数，此时的this的绑定规则为默认绑定，this指向window对象，所以结果输入为2。

如果此时使用了严格模式，即在代码中加了"use strict"，this指向undefined，调用的结果就会出错而不是输出2。

2、隐式绑定

var a = 2;

function foo() 
    console.log(this.a);


var obj = 
    a: 4,
    foo:foo
;

foo(); // 结果：2
obj.foo();  // 结果4

代码还是差不多的代码，只是加了一个obj对象，对象有一个a属性和一个foo属性引用了foo函数。对于foo();输出结果2，在上一节已经说明，因为是没用带任何修饰的情况下调用，应用了默认绑定。而在obj.foo()的调用中，foo函数的调用上下文是obj对象，obj包含了foo函数，此时this的绑定就发生了隐式绑定，this指向obj，this.a相当于obj.a，所以结果自然而然也输入4。

对于这种方式，我在代码中也经常用到。把可以归类的方法、变量都写成一个对象的形式，就形成了一个模块，也相当于一种设计模式，模块模式。

3、显示绑定

var a = 2;

function foo() 
    console.log(this.a);


var obj = 
    a: 4
;

foo.call(obj); // 结果：4
foo.apply(obj); // 结果：4
foo.bind(obj)(); // 结果：4

对于call、apply、bind的这三种调用方式都是属于显示绑定，作用是通过显示传入一个对象，改变this的上下文为此对象。call和apply是直接改变上下文对象直接调用，而bind是返回一个已经显示绑定的上下文的函数。

call和apply两个都是显示改变上下文并执行，唯一不同的就是传参方式，call是对象后面可以跟着多个参数，而apply传递参数，需要传递一个数组，即：

foo.call(obj, arg1, arg2, arg3, ...);
foo.apply(obj, [arg1, arg2, arg3, ...])

4、new绑定

学过后端语言的人都知道，通过构造函数，可以new一个对象实例，而在JavaScript中，对象也是通过new构造函数生成的，但，却和面向对象语言的new方式是不一样。下面来看看new操作符到底做了什么。

当使用new来调用函数时，发生了以下步骤：

a、创建了一个全新的对象，如：var obj = ；

b、连接全新对象与调用函数之间的[[Prototype]]，让函数的prototype指向全新对象，如obj.__proto__ = foo.prototype；

c、新对象会绑定到函数调用的this，如：foo.call(obj)；

d、返回对象。如果函数没有返回其他对象，那么new操作会自动返回这个新对象。

三、优先级

一般情况下：new绑定 > 显示绑定 > 隐式绑定 > 默认绑定

四、总结

还有其他的一些细节知识点，推荐还是看《你不知道的JavaScript上卷》这本书，真心不错。

函数的四种调用方式(代码片段)

1.函数模式functionshow()show()varshow=function()show()2.方法模式varobj=functionshow()obj.showFn=show;obj.showFn();3.构造函数模式functionpersonFn(name)　　this.name=name;　　　　　this.showName=function()　　　　cons 查看详情

jquery绑定事件的四种方式

jQuery提供了多种绑定事件的方式，每种方式各有其特点，明白了它们之间的异同点，有助于我们在写代码的时候进行正确的选择，从而写出优雅而容易维护的代码。下面我们来看下jQuery中绑定事件的方式都有哪些。 ... 查看详情

jquery绑定事件的四种方式

函数中的this的四种绑定形式

目录this的默认绑定this的隐式绑定隐式绑定下，作为对象属性的函数，对于对象来说是独立的在一串对象属性链中，this绑定的是最内层的对象this的显式绑定：(call和bind方法)new绑定正文 javascript中的this和函数息息相... 查看详情

javascript函数中的this的四种绑定形式

copyarraylist的四种方式(代码片段)

...数使用addAll方法使用Collections.copy使用stream总结CopyArrayList的四种方式简介ArrayList是我们经常会用到的集合类，有时候我们需要拷贝一个ArrayList，今天向大家介绍拷贝ArrayList常用的四种方式。使用构造函数ArrayList有个构造函数，可... 查看详情

javascript函数中的this的四种绑定形式

javascript中的this和函数息息相关，所以今天，我就给大家详细地讲述一番：javascript函数中的this 一谈到this，很多让人晕晕乎乎的抽象概念就跑出来了，这里我就只说最核心的一点——函数中的this总指向调用它的对象，接... 查看详情

函数调用的四种方式

...结果作为实参传递给声明函数时定义的形参；（2）this被绑定到全局变量varmyObject 查看详情

js你不知道的javascript笔记-this-四种绑定规则-绑定优先级-绑定例外-箭头函数(代码片段)

文章目录1.为什么要用`this`2.关于`this`的误解2.1`this`不是指向函数自身2.2`this`不指向函数的词法作用域3.什么是调用栈与调用位置4.`this`的绑定规则4.1默认绑定`fun()`4.2隐式绑定`obj.fun()`隐... 查看详情

rocketmq（13）——指定nameserver的四种方式(代码片段)

指定NameServer的四种方式无论是生产者还是消费者，对于NameServer来讲它们都是客户端，它们都需要与NameServer进行连接，可以有四种方式指定需要连接的NameServer的地址。通过程序指定这是我们最熟悉的方式，之前进行的介绍都是... 查看详情

rocketmq（13）——指定nameserver的四种方式(代码片段)

vue-router传参的四种方式超详细(代码片段)

vue路由传参的四种方式一、router-link路由导航方式传参父组件：<router-linkto="/跳转到的路径/传入的参数"></router-link>子组件：this.$route.params.content接受父组件传递过来的参数例如：路由配置：bashbash... 查看详情

c#打开wifi热点，wifi共享的四种方式总结(代码片段)

...tCore相关内容，欢迎关注！！ C#打开WiFi热点，WiFi共享的四种方式总结（一）C#打开WiFi热点，WiFi共享的四种方式总结（二）C#打开WiFi热点，WiFi共享的四种方式总结（三）C#打开WiFi热点，WiFi共享的四种方式总结（四）C#Windows系... 查看详情

获取项目根路径的四种方式(代码片段)

获取项目根路径的四种方式CreateTime--2018年3月2日11:39:52Author:Marydon$pageContext.request.contextPath<br>显示结果："/demo"　　应用：<i:formid="AddForm"met 查看详情

jquery绑定事件的四种方式：bindlivedelegateon

1、jQuery操作DOM元素的绑定事件的四种方式　　jQuery中提供了四种事件监听方式，分别是bind、live、delegate、on，对应的解除监听的函数分别是unbind、die、undelegate、off。2、必备的基础知识:DOM树　　示例，这是在browser环境下的一棵... 查看详情

map的四种遍历方式(代码片段)

日常编码过程大部分遇到List遍历，数组遍历等等，但是一遇到Map遍历总会停下想想、网上查查，以此总结以下四种遍历方式：1publicstaticvoidmain(String[]args)2Map<String,String>testMap=newHashMap();3testMap.put("key1","value1");4testMap.put("key2","va... 查看详情

jquery绑定事件的四种方式区别

jQuery中提供了四种事件监听方式，分别是bind、live、delegate、on，对应的解除监听的函数分别是unbind、die、undelegate、off。在开始看他们之前一：bind(type,[data],function(eventObject)) bi 查看详情

字符串拼接的四种方式详解，代码测试(代码片段)

字符串拼接的四种方式1.使用+号进行字符串拼接2.concat()方法3.StringBuffer(线程安全，效率没有StringBuilder高)4.StringBuilder(线程不安全)1.使用+号进行字符串拼接通过加号拼接原理类似于下面代码：StringBuildersb=newStringBu... 查看详情