JavaScript类继承 、构造函数继承，以及call、apply、bind 区别

最新推荐文章于 2023-08-09 11:13:34 发布
最新推荐文章于 2023-08-09 11:13:34 发布
阅读量258 收藏 2
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rookie_wzp/article/details/120102276
版权
本文详细介绍了ES6中的类语法，包括如何声明类以及类的继承。强调了在子类构造函数中需先调用`super`才能使用`this`的关键点。同时，对比了类继承与传统的构造函数继承，解释了`call`、`apply`和`bind`在修改`this`指向上的差异。文章深入探讨了JavaScript中的原型链，以及如何通过原型链实现方法的继承。
摘要由CSDN通过智能技术生成

 类：

一种有共同特性的事物的集合，是一个较为抽象的概念。比如人类，指一个范围；

类的声明

在ES6中可以使用class 关键字定义类，class可以被看做是一个语法糖；

 

 注意在类的内部默认是使用严格模式；

类的继承

Class通过 extends 关键字实现继承。

 

 如果只需继承父类的方法则不需要添加constructor。

在子类的 constructor 方法中，只有调用 super 之后，才可以使用 this 关键字，否则会报错。

super负责初始化this.相当于ES5中的call和apply方法

构造函数继承

子类继承父类，通过call/apply改变父类构造函数的this指向

 这里只实现了部分继承，仅继承了父类的属性，并没有继承父类的原型对象上的方法

要继承父类的方法需要借助原型链实现继承

让子构造函数的 prototype 等于父 构造函数实例出来的一个对象 

这样就可以获取到 父构造函数的 方法  在修改时也不会  改变父构造函数的 prototype

但是上面这一步相当于  把 子构造函数的 prototype 全部修改赋值  

子构造函数 内已经没有了 constructor  所以我们要重新给他创造一个constructor

call()、apply()、bind() 的用法与区别

这三种方法都可以修改this指向

这三个函数的第一个参数都是 this 的指向对象

call

第一个参数是 this 的指向对象

第二个，第三个参数允许是任何类型，直接写入，用逗号隔开

 

apply

第一个参数是 this 的指向对象

第二个参数是  必须是一个数组   存着数组的变量也可以

所以 apply方法一般和数组结合使用

 

这里封装了一个求和函数

利用apply方法 修改了fun()函数内的this指向

bind

第一个参数是 this 的指向对象

第二个，第三个参数允许是任何类型，直接写入，用逗号隔开

bind方法与call，apply的区别是bind不会调用函数，只修改this指向

 

rookie_wzp
关注
全面解析JavaScript中apply和call以及bind(推荐)
10-22
1. 继承（比如在子类中调用父类的构造函数） 2. 借用其他对象的方法（比如借用数组的方法来操作类数组对象） 3. 控制函数的this指向（比如确保回调函数内的this指向） call()方法的作用主要是调用一个函数，其第一...
js中call()函数用法、this指向
taotu_tao的博客
09-01 1306
call()是函数对象的方法，需要通过对象来调用，第一个参数是对象，这个对象是在fn函数执行时的this。call方法会直接调用函数，可以改变函数内的this指向，可以使用call实现继承。
什么是 call 函数？ call 函数的用法？ call 函数的实现原理(实例演示)
热门推荐
狮子座的男孩
12-13 1万+
Ⅰ、call 函数的简介： 1、call 函数的用法： fn.call(obj,1,2); A、call() 函数中的第一个参数表示：想让 this 指向的对象 (obj)； B、call() 函数中的第二及以后参数表示：传进去的实参； 2、call 函数的功能： 其一、让函数立执行； 其二、可改变 this 的指向； 其三、可实现继承问题； Ⅱ、call 函数如何调用： 1、call() 函数的调用过程： var obj = { a: 1 }; function fn(x, y) { // 每个
【继承系列】JS中的构造函数继承
AndyPoplar
06-03 741
1.构造函数继承 在子类构造函数内部使用call或apply来调用父类构造函数 我们先来复习一下call和apply方法。 通过call()、apply()或者bind()方法直接指定this的绑定对象, 如foo.call(obj)使用.call()或者.apply()的函数是会直接执行的,而bind()是创建一个新的函数，需要手动调用才会执行 .call()和.apply()用法基本类似，不过call接收若干个参数，而apply接收的是一个数组 举个????： const obj = { a:'
js面试题：fn.call.call.call.call(fn2) 解析
xufang461010923的专栏
08-19 1627
有这样一道 JS面试题，问 fn.call.call.call.call(fn2) 的结果是什么？ 先说下 call 函数的内部原理： 可以改变函数的this； 执行函数 下面模拟下 原生的call函数： Function.prototype.call = function(context, ...args){ context = context? Object(context) : window; // 改变 this context.fn = this; // 执行函数 return
JS 中bind、call、apply的区别
魏晋-
05-10 887
和call/apply的功能类似，只不过bind修改this指向之后，返回的新函数不会自动执行，如果有需要，需要手动执行；而call和apply改变this之后，返回的新函数会自动执行。方法的功能：修改原函数的this指向，并执行这个新函数。call和aply的第二个（或大于2个）参数为fn传入的参数。用来修改函数的执行上下文(this)。执行时一个对象可以使用另一个对象的方法。
js代码-JavaScript的call/apply/bind函数实现
07-15
`bind()` 在很多场景下非常有用，比如创建事件处理函数、 setTimeout 或 setInterval 中保持正确的上下文，以及作为构造函数的 `new` 关键字的替代等。 在 `main.js` 文件中，可能包含了这三个函数的实现，以便读者...
实例讲解JavaScript中call、apply、bind方法的异同
10-21
为了更好地控制`this`的指向，JavaScript为函数提供了三个特殊的方法：`call()`、`apply()`和`bind()`。 首先，来看`call()`方法。`call()`方法可以改变函数的`this`指向，并且可以直接调用函数。它的第一个参数是...
浅谈javascript中的call、apply、bind
11-22
在JavaScript中，`call`...这些方法在JavaScript中广泛应用于继承、模拟类构造函数、控制事件处理函数的上下文等场合，极大地提升了代码的灵活性和可复用性。理解并熟练掌握它们，对于提升JavaScript编程能力至关重要。
call、apply、bind详细讲解
m0_60273757的博客
12-07 1531
call、apply、bind详细讲解,从小白的思维出发，更加好理解！
继承（类式继承、构造函数式继承、组合继承）
Mr.ShyZhang趟过的前端“小路坑”
05-30 1230
继承： 指的是子类继承父类的属性和方法。         子类是父类的实例         子类继承父类的属性和方法，可以使用父类的属性和方法，又不影响父类原型上的方法         父类不能使用子类独有的属性和方法继承方式：    ① 类式继承 或者 原型式继承    ② 构造函数式继承     ③ 组合式继承1. instanceof 该关键字用于判定某一个对象是否是某一个构造函数的实例使用...
JavaScript构造函数和类的区别
最新发布
zdn135860_的博客
08-09 243
原文
JS高级—call(),apply(),bind()
weixin_49602426的博客
09-18 806
通过提供一个新的this值给当前调用的函数/方法，从而改变this指向。apply-应用、运用的意思。apply()-调用一个具有给定值的函数，以及以一个数组（或一个类数组对象）的形式提供的参数this，简单理解为调用函数的，fang’shi但是它可以改变this指向。bind：绑定、捆绑不会调用函数，但是也能改变函数内部的this指向。
call、apply、bind用法
GTbond的博客
12-14 610
call apply bind 的用法 JavaScript 的一大特点是，函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念 ; 在 javascript 中，call 和 apply 都是为了改变某个函数运行时的上下文（context）而存在的，换句话说，就是为了改变函数体内部 this 的指向。 //call、apply生成立即执行函数，生成即调用 fn.call(this，参数一，参数二，···) fn.apply(this，[参数一，参数二，···]) //b
call和apply区别是什么，哪个性能更好一些？
沛沛呀、
05-08 645
call和apply区别是什么，哪个性能更好一些？ call和apply都是function原型上的方法，用于改变this指向的，唯一的区别就是传入参数的形式不一样，call是一个一个传参，而apply把所有参数用数组形式传。bind与他们类似（传参数也是数组形式），都是改变this指向，只是预先处理函数，但是并不会立即执行。 经过测试，call比apply性能要好一些。 //使用apply场景 let arr = [10,20,30], obj = {}; function fn(x,y,z){
call，apply,和bind的作用，区别和那个性能好
zxy123yxq的博客
09-05 288
call和apply都用用来调用函数并且绑定一个this,这个this为第一个传入的参数 call和apply的区别 call传入参数时一个个的传入的 例如： fn.call(obj,1,2,3) apply传入后面的参数是采用数组的形式 fn.apply(obj,[1,2,3,4,5]) 注意当第一个参数是undefind和null时this都是window call的性能比apply的性能要好特别是在参数大于三个时，更多的还是使用call bind bind不会执行函数，f..
javascript之修改 this指向的三种方法
QuShihua_CD的博客
05-23 464
1.call 语法 var obj={name:“zs”,sex:“男”,fn:function(){console.log(this.name)}} var obj1={name:“ls”} obj.fn.call(obj1,参数1，参数2，参数3） 此时在添加了call方法后原本obj里面的fn函数里面打印”this.name"的“this”指向由指向obj变为指向obj1，也就是说在call...
递归、递归的练习、数组的方法、可变参数、call和apply、bind——JS数组
weixin_70320000的博客
11-24 408
递归、递归的练习、数组的方法、可变参数、call和apply、bind
JavaScript |构造函数和原型 + 继承 + 类的本质 + ES5 中的新增方法 + 构造函数原型 prototype + 对象原型 __proto__ + constructor构造函数
不爱吃菜的菜菜的博客
06-01 518
目录构造函数和原型构造函数构造函数原型 prototype对象原型 __proto__constructor 构造函数构造函数、实例、原型对象三者之间的关系原型链JavaScript 的成员查找机制(规则)原型对象this指向扩展内置对象继承call()借用构造函数继承父类型属性借用原型对象继承父类型方法类的本质ES5 中的新增方法数组方法forEach()数组方法 - 筛选数组 filter()数组方法 some()查询商品案例字符串方法对象方法1. Object.keys() 用于获取对象自身所有的
JavaScript this指向与绑定详解：构造函数、方法与call/apply/bind
4. **`call`、`apply`和`bind`方法**: 这三个方法允许开发者显式地设置`this`。`call`和`apply`接受一个对象作为第一个参数，并将`this`替换为该对象，同时可以提供一个数组作为参数列表。`bind`则返回一个新的函数...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值