js函数this指向

news2024/9/24 1:14:37

目录

this的绑定规则

 绑定一：默认绑定；

​ 绑定二：隐式绑定；

​ 绑定三：显式绑定；

通过call或者apply绑定this对象

         绑定四：new绑定；

内置函数的绑定

this绑定规则的优先级

绑定之外的情况

箭头函数的使用

this规则之外 – ES6箭头函数

this面试题分析

this的绑定规则

我们先来看一个让人困惑的问题：
 定义一个函数，我们采用三种不同的方式对它进行调用，它产生了三种不同的结果
◼ 这个的案例可以给我们什么样的启示呢？
 1.函数在调用时，JavaScript会默认给this绑定一个值；
 2.this的绑定和定义的位置（编写的位置）没有关系；
 3.this的绑定和调用方式以及调用的位置有关系；
 4.this是在运行时被绑定的；
◼ 那么this到底是怎么样的绑定规则呢？
 绑定一：默认绑定；
 绑定二：隐式绑定；
 绑定三：显示绑定；
 绑定四：new绑定；

 绑定一：默认绑定；

严格模式下, 独立调用的函数中的this指向的是undefined


 绑定二：隐式绑定；


 绑定三：显式绑定；

    // 显式绑定
    var obj = {
      name: "why"
    }
 
    function foo() {
      console.log("foo函数:", this)
    }
 
    // 执行函数, 并且函数中的this指向obj对象
    // obj.foo = foo
    // obj.foo()
 
    // 执行函数, 并且强制this就是obj对象
    foo.call(obj)
    foo.call(123)
    foo.call("abc")

通过call或者apply绑定this对象

 显示绑定后，this就会明确的指向绑定的对象


◼ 如果我们希望一个函数总是显示的绑定到一个对象上，可以怎么做呢？
 使用bind方法，bind() 方法创建一个新的绑定函数（bound function，BF）；
 绑定函数是一个 exotic function object（怪异函数对象，ECMAScript 2015 中的术语）
 在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

    function foo(name, age, height, address) {
      console.log("foo:", this)
      console.log("参数:", name, age, height, address)
    }
 
    var obj = { name: "why" }
 
    // 需求: 调用foo时, 总是绑定到obj对象身上(不希望obj对象身上有函数)
    // 1.bind函数的基本使用
    // var bar = foo.bind(obj)
    // bar() // this -> obj
 
    // 2.bind函数的其他参数(了解)
    var bar = foo.bind(obj, "kobe", 18, 1.88)
    bar("james")
    function foo(name, age, height, address) {
      console.log("foo:", this)
      console.log("参数:", name, age, height, address)
    }
 
    var obj = { name: "why" }
 
    // 需求: 调用foo时, 总是绑定到obj对象身上(不希望obj对象身上有函数)
    // 1.bind函数的基本使用
    // var bar = foo.bind(obj)
    // bar() // this -> obj
 
    // 2.bind函数的其他参数(了解)
    var bar = foo.bind(obj, "kobe", 18, 1.88)
    bar("james")

 绑定四：new绑定；

JavaScript中的函数可以当做一个类的构造函数来使用，也就是使用new关键字。
◼ 使用new关键字来调用函数是，会执行如下的操作：
 1.创建一个全新的对象；
 2.这个新对象会被执行prototype连接；
 3.这个新对象会绑定到函数调用的this上（this的绑定在这个步骤完成）；
 4.如果函数没有返回其他对象，表达式会返回这个新对象；

内置函数的绑定

◼ 有些时候，我们会调用一些JavaScript的内置函数，或者一些第三方库中的内置函数。
 这些内置函数会要求我们传入另外一个函数；
 我们自己并不会显示的调用这些函数，而且JavaScript内部或者第三方库内部会帮助我们执行；
 这些函数中的this又是如何绑定的呢

 // 内置函数(第三方库): 根据一些经验
    // 1.定时器
    // setTimeout(function() {
    //   console.log("定时器函数:", this)
    // }, 1000)
 
    // 2.按钮的点击监听
    // var btnEl = document.querySelector("button")
    // btnEl.onclick = function() {
    //   console.log("btn的点击:", this)
    // }
 
    // btnEl.addEventListener("click", function() {
    //   console.log("btn的点击:", this)
    // })
 
    // // 3.forEach
    var names = ["abc", "cba", "nba"]
    names.forEach(function(item) {
      console.log("forEach:", this)
    }, "aaaa")

this绑定规则的优先级

◼ 1.默认规则的优先级最低
 毫无疑问，默认规则的优先级是最低的，因为存在其他规则时，就会通过其他规则的方式来绑定this
◼ 2.显示绑定优先级高于隐式绑定
◼ 3.new绑定优先级高于隐式绑定
◼ 4.new绑定优先级高于bind
 new绑定和call、apply是不允许同时使用的，所以不存在谁的优先级更高
 new绑定可以和bind一起使用，new绑定优先级更高
 

// 比较优先级:
 
    // 1.显式绑定绑定的优先级高于隐式绑定
    // 1.1.测试一:apply高于默认绑定
    // var obj = { foo: foo }
    // obj.foo.apply("abc")
    // obj.foo.call("abc")
 
    // 1.2.测试二:bind高于默认绑定
    // var bar = foo.bind("aaa")
    // var obj = {
    //   name: "why",
    //   baz: bar
    // }
    // obj.baz()
 
 
    // 2.new绑定优先级高于隐式绑定
    // var obj = {
    //   name: "why",
    //   foo: function() {
    //     console.log("foo:", this)
    //     console.log("foo:", this === obj)
    //   }
    // }
    // new obj.foo()
 
 
    // 3.new/显式
    // 3.1. new不可以和apply/call一起使用
 
    // 3.2. new优先级高于bind
    // function foo() {
    //   console.log("foo:", this)
    // }
    // var bindFn = foo.bind("aaa")
    // new bindFn()
 
 
    // 4.bind/apply优先级
    // bind优先级高于apply/call
    function foo() {
      console.log("foo:", this)
    }
    var bindFn = foo.bind("aaa")
    bindFn.call("bbb")

绑定之外的情况

 情况一：如果在显示绑定中，我们传入一个null或者undefined，那么这个显示绑定会被忽略，使用默认规则

情况二：创建一个函数的 间接引用，这种情况使用默认绑定规则。
 赋值(obj2.foo = obj1.foo)的结果是foo函数；
 foo函数被直接调用，那么是默认绑定；

// 1.情况一: 显式绑定null/undefined, 那么使用的规则是默认绑定
    // function foo() {
    //   console.log("foo:", this)
    // }
 
    // foo.apply("abc")
    // foo.apply(null)
    // foo.apply(undefined)
 
 
    // 2.情况二: 间接函数引用
    var obj1 = {
      name: "obj1",
      foo: function() {
        console.log("foo:", this)
      }
    }
    var obj2 = {
      name: "obj2"
    };
 
    // {}[]()
 
    // obj2.foo = obj1.foo
    // obj2.foo()
    (obj2.foo = obj1.foo)()

箭头函数的使用

箭头函数是ES6之后增加的一种编写函数的方法，并且它比函数表达式要更加简洁：
 箭头函数不会绑定this、arguments属性；(没有但是可以调用)
 箭头函数不能作为构造函数来使用（不能和new一起来使用，会抛出错误;因为没有原型所以无法使用）；

    // 1.之前的方式
    function foo1() {}
    var foo2 = function(name, age) {
      console.log("函数体代码", this, arguments)
      console.log(name, age)
    }
 
    // 2.箭头函数完整写法
    var foo3 = (name, age) => {
      console.log("箭头函数的函数体")
      console.log(name, age)
    }
 
    // 3.箭头函数的练习
    // 3.1. forEach
    var names = ["abc", "cba", "nba"]
    names.forEach((item, index, arr) => {
      console.log(item, index, arr)
    })
    // 3.2. setTimeout
    setTimeout(() => {
      console.log("setTimeout")
    }, 3000)

    var names = ["abc", "cba", "nba"]
    var nums = [20, 30, 11, 15, 111]
 
    // 1.优化一: 如果箭头函数只有一个参数, 那么()可以省略
    // names.forEach(item => {
    //   console.log(item)
    // })
    // var newNums = nums.filter(item => {
    //   return item % 2 === 0
    // })
 
    // 2.优化二: 如果函数体中只有一行执行代码, 那么{}可以省略
    // names.forEach(item => console.log(item))
 
    // 一行代码中不能带return关键字, 如果省略, 需要带return一起省略(下一条规则)
    // var newNums = nums.filter(item => {
    //   return item % 2 === 0
    // })
 
    // 3.优化三: 只有一行代码时, 这行代码的表达式结果会作为函数的返回值默认返回的
    // var newNums = nums.filter(item => item % 2 === 0)
    // var newNums = nums.filter(item => item % 2 === 0)
 
 
    // 4.优化四: 如果默认返回值是一个对象, 那么这个对象必须加()
    // 注意: 在react中我会经常使用 redux
 
    // var arrFn = () => ["abc", "cba"]
    // var arrFn = () => {} // 注意: 这里是{}执行体
    // var arrFn = () => ({ name: "why" })
    // console.log(arrFn())
 
    // 箭头函数实现nums的所有偶数平方的和
    var nums = [20, 30, 11, 15, 111]
    var result = nums.filter(item => item % 2 === 0)
                     .map(item => item * item)
                     .reduce((prevValue, item) => prevValue + item)
    console.log(result)

this规则之外 – ES6箭头函数

◼ 箭头函数不使用this的四种标准规则（也就是不绑定this），而是根据外层作用域来决定this。
◼ 我们来看一个模拟网络请求的案例：
 这里我使用setTimeout来模拟网络请求，请求到数据后如何可以存放到data中呢？
 我们需要拿到obj对象，设置data；
 但是直接拿到的this是window，我们需要在外层定义：var _this = this
 在setTimeout的回调函数中使用_this就代表了obj对象

 为什么在setTimeout的回调函数中可以直接使用this呢？
 因为箭头函数并不绑定this对象，那么this引用就会从上层作用于中找到对应的this

    // 网络请求的工具函数
    function request(url, callbackFn) {
      var results = ["abc", "cba", "nba"]
      callbackFn(results)
    }
 
    // 实际操作的位置(业务)
    var obj = {
      names: [],
      network: function() {
        // 1.早期的时候
        // var _this = this
        // request("/names", function(res) {
        //   _this.names = [].concat(res)
        // })
 
        // 2.箭头函数写法
        request("/names", (res) => {
          this.names = [].concat(res)
        })
      }
    }
 
    obj.network()
    console.log(obj)



数：
 

this面试题分析

题1

var name = "window";
 
var person = {
  name: "person",
  sayName: function () {
    console.log(this.name);
  }
};
 
function sayName() {
  var sss = person.sayName;
 
  sss(); // 绑定: 默认绑定, window -> window
 
  person.sayName(); // 绑定: 隐式绑定, person -> person
 
  (person.sayName)(); // 绑定: 隐式绑定, person -> person
 
  (b = person.sayName)(); // 术语: 间接函数引用, window -> window
}
 
sayName();

题2

var name = 'window'
 
 
// {} -> 对象
// {} -> 代码块
var person1 = {
  name: 'person1',
  foo1: function () {
    console.log(this.name)
  },
  foo2: () => console.log(this.name),
  foo3: function () {
    return function () {
      console.log(this.name)
    }
  },
  foo4: function () {
    // console.log(this) // 第一个表达式this -> person1
    // console.log(this) // 第二个表达式this -> person2
    // console.log(this) // 第三个表达式this -> person1
     
    return () => {
      console.log(this.name)
    }
  }
}
 
var person2 = { name: 'person2' }
 
 
// 开始题目:
person1.foo1(); // 隐式绑定: person1
person1.foo1.call(person2); // 显式绑定: person2
 
person1.foo2(); // 上层作用域: window
person1.foo2.call(person2); // 上层作用域: window
 
person1.foo3()(); // 默认绑定: window
person1.foo3.call(person2)(); // 默认绑定: window
person1.foo3().call(person2); // 显式绑定: person2
 
person1.foo4()(); // person1
person1.foo4.call(person2)(); // person2
person1.foo4().call(person2); // person1

题3

var name = 'window'
 
/*
  1.创建一个空的对象
  2.将这个空的对象赋值给this
  3.执行函数体中代码
  4.将这个新的对象默认返回
*/
function Person(name) {
  this.name = name
  this.foo1 = function () {
    console.log(this.name)
  },
  this.foo2 = () => console.log(this.name),
  this.foo3 = function () {
    return function () {
      console.log(this.name)
    }
  },
  this.foo4 = function () {
    return () => {
      console.log(this.name)
    }
  }
}
 
// person1/person都是对象(实例instance)
var person1 = new Person('person1')
var person2 = new Person('person2')
 
 
// 面试题目:
person1.foo1() // 隐式绑定: person1
person1.foo1.call(person2) // 显式绑定: person2
 
person1.foo2() // 上层作用域查找: person1
person1.foo2.call(person2) // 上层作用域查找: person1
 
person1.foo3()() // 默认绑定: window
person1.foo3.call(person2)() // 默认绑定: window
person1.foo3().call(person2) // 显式绑定: person2
 
person1.foo4()() // 上层作用域查找: person1(隐式绑定)
person1.foo4.call(person2)() //  上层作用域查找: person2(显式绑定)
person1.foo4().call(person2) // 上层作用域查找: person1(隐式绑定)

题4

var name = 'window'
 
/*
  1.创建一个空的对象
  2.将这个空的对象赋值给this
  3.执行函数体中代码
  4.将这个新的对象默认返回
*/
function Person(name) {
  this.name = name
  this.obj = {
    name: 'obj',
    foo1: function () {
      return function () {
        console.log(this.name)
      }
    },
    foo2: function () {
      return () => {
        console.log(this.name)
      }
    }
  }
}
 
var person1 = new Person('person1')
var person2 = new Person('person2')
 
person1.obj.foo1()() // 默认绑定: window
person1.obj.foo1.call(person2)() // 默认绑定: window
person1.obj.foo1().call(person2) // 显式绑定: person2
 
person1.obj.foo2()() // 上层作用域查找: obj(隐式绑定)
person1.obj.foo2.call(person2)() // 上层作用域查找: person2(显式绑定)
person1.obj.foo2().call(person2) // 上层作用域查找: obj(隐式绑定)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/611286.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

给电脑重装系统的时间需要多久才能装好

给电脑重装系统的时间需要多久才能装好

在进行电脑重装系统时，如果遇到系统安装时间过长的情况，可能会引起用户的困惑和不安。本文将介绍一些常见的原因和解决方法，以帮助您理解并应对系统安装时间过长的情况。 ​工具/原料： 系统版本：Windows 10 专业版 品…
阅读更多...
《Java并发编程实战》课程笔记（九）

《Java并发编程实战》课程笔记（九）

Semaphore：如何快速实现一个限流器？ 信号量模型 信号量模型还是很简单的，可以简单概括为：一个计数器，一个等待队列，三个方法。 在信号量模型里，计数器和等待队列对外是透明的，所以…
阅读更多...
chatgpt赋能python：Python图片大小设置的SEO指南

chatgpt赋能python：Python图片大小设置的SEO指南

Python 图片大小设置的SEO指南 在网站设计和开发中，图片大小通常是一个重要的问题。合适的图片大小可以极大地影响用户体验和搜索引擎优化（SEO）结果。Python是一种广泛使用的编程语言，可以用来控制和设置图片大小。在本文中&…
阅读更多...
BUUCTF MD5

BUUCTF MD5

密文： e00cf25ad42683b3df678c61f42c6bda 简述： 一般MD5值是32位由数字“0-9”和字母“a-f”所组成的字符串，字母大小写统一；如果出现这个范围以外的字符说明这可能是个错误的md5值，就没必要再拿去解密了。 特征&…
阅读更多...
SQL-DDL操作数据库、表

SQL-DDL操作数据库、表

SQL-DDL操作数据库、表 1 DDL:操作数据库 1.1 查询数据库 查询所有的数据库 SHOW DATABASES; show databases;1.2 创建数据库 创建数据库 CREATE DATABASE 数据库名称; create database 数据库名称;创建数据库(判断，如果不存在则创建) CREATE DATABASE IF NOT…
阅读更多...
SyntaxError：Unexpected end of JSON input while parsing near xxxxx 报错及解决

SyntaxError：Unexpected end of JSON input while parsing near xxxxx 报错及解决

环境：Node 12.21.0、npm 6.14.11 （其他版本也会出现这样的问题） 找到报错日志并进行查看： less /Users/roc/.npm/_logs/2023-06-05T02_23_51_747Z-debug.log报错信息如下： 19067 verbose stack SyntaxError: Unexp…
阅读更多...
【遇到的问题】JAVA应用程序处于安全原因被阻止。

【遇到的问题】JAVA应用程序处于安全原因被阻止。

遇到的问题： 直入正题，远程服务器用JAVA连接KVM报以下错(如图)。 应用程序处于安全原因被阻止 无法验证证书 将不执行该应用程序 名称：Java viewer 发行者：ATEN 位置：https://192.168.210:443 原因： 通过…
阅读更多...
vue3实现高德地图多点标注（so easy）

vue3实现高德地图多点标注（so easy）

vue3实现高德地图多点标注（so easy） 前言思路清晰，抽丝剥茧必要的准备工作最简单的部分处理数据之前（最关键的思路）效果完整代码 前言 非常感谢你能打开这篇博客，我想你一定是遇到了地图多点标注有关的问题…
阅读更多...
采购管理系统对企业有什么作用？原来用零代码搭建如此便捷

采购管理系统对企业有什么作用？原来用零代码搭建如此便捷

什么是采购管理系统？ 采购管理系统是一种企业内部管理软件，用于协调和管理企业的采购过程。它涵盖了采购计划、询价、比价、采购订单、采购合同、采购收货、发票等一系列采购环节，以及与供应商的信息和交流。其主要目的是：优化采…
阅读更多...
M12圆形连接器公母对接带线3PIN4PIN

M12圆形连接器公母对接带线3PIN4PIN

随着工业自动化的发展，M12圆形连接器公母对接带线3PIN4PIN作为一种重要的连接器件，被广泛应用于各种工业设备中。本文将详细介绍M12连接器的特点以及应用场景，为大家解答M12连接器的相关问题。 M12连接器主要由连接器头、插座和电缆组成&…
阅读更多...
【Web网站服务】Nginx Rewrite重写模块

【Web网站服务】Nginx Rewrite重写模块

Nginx Rewrite 一、常用的Nginx 正则表达式二、location 匹配的范围2.1location实验 三、rewrite模块3.1rewrite跳转3.2rewrite执行顺3.3flag标记说明3.4rewrite中常用的全局变量3.5rewrite实验3.5.1 基于域名的跳转3.5.2基于客户端IP访问跳转3.5.3基于旧域名跳转到新域名后面加…
阅读更多...
三、HAL_无源蜂鸣器的驱动

三、HAL_无源蜂鸣器的驱动

1、开发环境 (1)KeilMDK：V5.38.0.0 (2)STM32CubeMX：V6.8.1 (3)MCU：STM32F407ZGT6 2、无源蜂鸣器简介 无源蜂鸣器内部没有振荡源，需要采用一定频率的方波才能驱动发声。详情参开以下文章。 八、51单片机之蜂鸣器_51蜂鸣器_朱嘉…
阅读更多...
DINO代码学习笔记（三）

DINO代码学习笔记（三）

DINO代码学习笔记（一）中已经将输入transformer之前的参数处理给捋了一遍 DINO代码学习笔记（二）中将encoder部分给捋了一遍 本篇进入decoder，这里先对encoder做一些假设，基于DINO代码学习笔记（…
阅读更多...
使用Harbor 和 Kraken 优化镜像拉取速

使用Harbor 和 Kraken 优化镜像拉取速

一、P2P镜像分发简述 随着云原生架构被越来越多的企业接受，企业应用中容器集群的规模也越来越大。当容器集群达到一定的规模且单容器应用副本数达到一定级别时，集群中容器镜像的分发将面临挑战。   P2P（Peer-to-Peer，点对点&am…
阅读更多...
股票策略社群实盘展示

股票策略社群实盘展示

量化策略开发，高质量社群，交易思路分享等相关内容 大家好，我是Le Chiffre 从今年1月份开始，我们开始了松鼠股票策略社群，历经5个月，发布了5个策略。其中有2个多因子，2个etf，1个网格…
阅读更多...
一款企业级的供应链采购系统，已开源

一款企业级的供应链采购系统，已开源

介绍 基于pig微服务架构打造 供应链系统，采购配送系统。为客户提供仓储管理、订单管理、打单、货源采购、分拣、配送等系统功能。 软件架构 采用 J2EE 技术体系，基于Spring Cloud微服务框架进行封装，平台设计灵活可扩展、可移植、可应对高…
阅读更多...
Java使用EasyCode自动生成代码工具分享

Java使用EasyCode自动生成代码工具分享

此为内容创作模板，在发布之前请将不必要的内容删除 做Java的项目开发，会使用各种代码自动生成工具，今天就来介绍一款EasyCode插件，废话不多说了，看看怎么安装和使用。 一、EasyCode插件 EasyCode的安装 在Idea的Sett…
阅读更多...
在云服务器上安装MySQL (MariaDB) 数据库并与Python连接和互动

在云服务器上安装MySQL (MariaDB) 数据库并与Python连接和互动

诸神缄默不语-个人CSDN博文目录 本文介绍如何在云服务器（CentOS）上安装MySQL数据库（其实是MariaDB数据库，但是当成MySQL用也没什么问题），并用pymysql与原生Python代码进行互动，或用Flask-SQLAl…
阅读更多...
SpringSecurityOAuth已停更，来看一看进化版本Spring Authorization Server

SpringSecurityOAuth已停更，来看一看进化版本Spring Authorization Server

Spring Authorization Server是Spring Security OAuth的进化版本，Spring Security OAuth官方已经宣布“End of Life”了。Spring Security OAuth使用的是OAuth2.0标准而Spring Authorization Serve引入了对OAuth 2.1和OpenID Connect 1.0规范的支持，并提…
阅读更多...
开源赋能 普惠未来｜OpenHarmony诚邀您参与2023开放原子全球开源峰会

开源赋能 普惠未来｜OpenHarmony诚邀您参与2023开放原子全球开源峰会

OpenHarmony面向万物智联，秉持“生态统一、开放共赢”的理念，围绕“架构解耦、弹性部署”“自由流转、智慧协同”和“极简开发、一致体验”三大架构特征，构建分布式全场景协同的开源操作系统基座与生态系统。面向全场景、全连接、全智能时代&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023