普通函数this 、class this 和箭头函数的this指向（个人觉得很容易理解）

最新推荐文章于 2022-05-26 11:45:20 发布
最新推荐文章于 2022-05-26 11:45:20 发布
阅读量225 收藏
点赞数 1
分类专栏： 前端
原文链接：https://www.bilibili.com/video/BV1Sp4y1U7FG?from=search&seid=11127455349040000409
版权

1. 普通函数 this 指向

（1）//默认绑定

（2）隐式绑定 （对象方法被调用时，会发生隐式绑定，this 指向该方法的对象）

（3）硬绑定

（4）构造函数绑定

2.剪头函数 :该函数所在的作用域指向的对象，对象是不能形成独立的作用域 (我个人理解是，当前作用域的上一级作用域)

3. class this

 

感谢B站技术蛋老师的视频教程

深夜的我最精神
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js学习笔记04-ES6函数(箭头函数与this),class
weixin_34397291的博客
05-16 405
箭头函数 让简短单行函数更容易编写和阅读的普通函数可以是函数声明或函数表达式，但是箭头函数始终是表达式普通函数(把名字转换为大写) const upperNames = ['Fish', 'RedHands', 'Sugarbeans'].map(function(name) { return name.toUpperCase(); }); 将函数转换为箭头函数,函数主体只有一个表达式,简写...
js class 中 成员函数和箭头函数的注意点
阿豪
10-03 396
原文链接: js class 中 成员函数和箭头函数的注意点 ...
那些易混淆的概念(三)：function和class
xinxin_csdn的博客
05-26 228
ES6中的class类和function区别 相同点： 都可作为构造函数，通过new操作符来实例化 函数实现构造函数 function Person(name) { this.name = name } const user = new Person('Jack') console.log(user); // Person { name: 'Jack' } 类实现构造函数,其中的constructor方法是一个特殊的方法，称为构造函数方法； 用new创建实例后，自动调用co.
class箭头函数和普通函数的this
lewxiaolu的博客
12-15 1115
class Animal{ constructor() { this.name = 'cat' } speak() { console.log(this.name) } eat = () => { console.log(this.name) } } const n = new Animal() n.speak() n.eat() const a = n.speak const b = n.eat b() a() n.speak() // cat n
Class中的实例方法用箭头函数写, 内部的this指向对象本身问题
weixin_44038881的博客
06-29 1220
最近在学习React框架的时候，发现在组件中直接写箭头函数, 作为组件实例的方法, 其内部的this是直接指向组件的，由此知识点为导火索，点燃了我知识盲区的炸药桶，因为以前并没有注意到这个知识点，例如: es6中的类定义 class A { constructor(name, age) { this.name = name this.age = age } logThis= () => { console.log(this) // 指向实例 } } new A('张三',
C#使用this关键字实现串联构造函数调用方法
01-20
本文实例讲述了C#使用this关键字实现串联构造函数调用方法。分享给大家供大家参考。具体分析如下： 在一个类中如果需要实现多个自定义构造函数,通常做法是在构造函数中实现各自的业务逻辑,如果这些业务逻辑的实现...
js this函数调用无需再次抓获id，name或标签名
12-02
input type=”button” id=”tianjia” value=”保 存” class=”btn1″ onClick=”nullCheck(this)”/> [removed] function nullCheck(obj) { ……//这里写你所需功能的代码 } [removed] <input type=”...
C++编程指向成员的指针以及this指针的基本使用指南
12-31
指向成员的指针 指向成员的指针的声明是指针声明的特例。使用以下序列来声明它们： [storage-class-specifiers] [cv-qualifiers] type-specifiers [ms-modifier] qualified-name ::* [cv-qualifiers] identifier ...
php class中self,parent,this的区别以及实例介绍
12-19
2，this可以调用本类中的方法和属性，也可以调用父类中的可以调的方法和属性 二，self 1，self可以访问本类中的静态属性和静态方法，可以访问父类中的静态属性和静态方法。2，用self时，可以不用实例化的 三，...
React组件中的this的具体使用
01-19
通过编写一个简单组件，并渲染出来，分别打印出自定义函数和render中的this： import React from 'react'; const STR = '被调用，this指向：'; class App extends React.Component{ constructor(){ super() } /...
class构造函数内部使用箭头函数之后this的指向问题
xiaotiantian1993s的博客
11-12 4674
这个问题一开始是我在探索在对象上直接声明一个方法时方法内部this的指针到底指向的是对象自己还是顶层对象这个问题引出来的, 先看下面示例： 例子中a.x和a.y的区别就在于是否是箭头函数，输出结果为箭头函数this指向全局，而function声明形式this指向a对象，b和c输出全部指向window。通过上面的结果我们可以得出结论： 1.箭头函数体内的this对象，就是定义时所在的对象，而不是使...
React创建组件的方法；Class组件为什么要绑定this？
Alecor的博客
10-18 1305
在写这个问题之前，我们先要学习2个知识点； 1 ES6 Class的基本语法 2 React创建组件的方法； ES6 Class的基本语法 在ES6 引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。 我这里不做过多的介绍，具体请参考ECMAScript 6 入门(阮一峰) (1) ES6 Class 编写对象 class Point { construc...
解决js类定义里面绑定事件this指向问题
iamlujingtao的博客
03-04 2179
问题分析 最近一个js问题困扰了2小时：现在我们需要定义一个类，类里面初始化对象时会绑定事件，然后销毁方法会解绑事件，精简代码如下：（这里使用es6定义类的方式，使用原始的function思路也是一样的） class Test { constructor() { this.width = 0; } //初始化对象时使window绑定事件resize，设置对象宽度 init(...
箭头函数与普通函数区别 == es6中的class与继承
WLIULIANBO的博客
12-15 517
箭头函数与普通函数区别 一、箭头函数是匿名函数，不能作为构造函数，不能使用new 箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式：一种只包含一个表达式，连{ … }和return都省略掉。还有一种可以包含多条语句，这时候就不能省略{ … }和return。 不能作为构造函数，不能使用new 二、箭头函数内没有arguments，可以用展开运算符…解决 三、箭头函数的this，始终指向父级上下文（箭头函数的this取决于定义位置父级的上下文，跟使用位置没关系，普通函数this指向调用的
JavaScript ES6 class类(this关键字)总结
tonny7501的博客
01-06 3875
ES6实现了class关键词,使js模块化编程更加简洁, 下面是关于class继承的一小点总结, 详细请参照这位大神的详细介绍(点击) 具体class的原理这边就不写了, 看上面的链接即可, 这边只是个人的一点总结吧 class类的this 在JS中this关键字用的非常多, jq中的this, 原生js的this和class中的this代表的含义都不一样, 问题就出现在如果这3中情况都用在...
JavaScript之class中的箭头函数和普通函数
小栗子的博客
03-04 3433
JavaScript之class中的箭头函数和普通函数1. 前言2. 实例代码3 通过实例调用方法3.1 调用箭头函数方法3.2 调用普通函数方法3.3 小结4. 通过方法的引用调用方法4.1 调用箭头函数方法4.2 调用普通函数方法4.3 小结 1. 前言 class是ES6中的新语法，本质上并不是功能，只是对象原型的语法糖。让对象原型的写法更接近传统的面向对象语言（比如Java）。 在使用React框架开发前端项目的过程中频繁使用到了class，当时就很好奇class类中普通函数形式的方法和箭头函数形式
修改class类中this指向的三种方式
u014183772的专栏
08-03 1746
修改class类中this指向的三种方式初始原因第一种使用箭头函数第二种使用bind第三种使用proxy代理 初始原因 // 修改 class 类中的this指向 class Person{ get(){ console.log(this); this.eat(); } eat(){ console.log('你今天吃什么'); } } let
类中成员中的一般方法和$this的用法
weixin_30325971的博客
05-24 266
一般方法 方法定义跟原来函数定义几乎一样。 使用是通过类或类的对象来进行的。 方法前可以加修饰词： ｐｕｂｌｉｃ，　 ｐｒｏｔｅｃｔｅｄ， ｐｒｉｖａｔｅ，省略就算“public” 方法中$this关键字 $this是一个“伪对象”，代表当前所属类的当前对象。 举例： 一些简单说法： 类是定义好的某些对象的“模板／模型” 对象是根据该模板／模型所“创建”出...
this的四种指向以及箭头函数中this指向
qq_43378800的博客
09-11 663
1.普通函数 this指向是,window function sayHi(){ console.log(this) } sayHi(); 2.对象函数 this的指向是,当前对象 var obj={ name:'小花', age:18, sayHi(){ console.lo...
箭头函数 this指向
最新发布
08-13
箭头函数的this指向是继承而来的，并且指向在定义它时所处的对象，即父级作用域，而不是执行时的对象。这意味着箭头函数内部的this的值不会受到函数调用方式的影响，而是固定指向外层代码块的this。这种特性让箭头...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值