改变 this 指向的 call 和 apply

一、call 方法
基本用法

function test() {console.log('hello world');
}
test(); // hello world
test.call(); // hello world
// test() ==> test.call()

其实就是借用别人的方法，来实现自己的功能

function Person(name, age) {// this == objthis.name = name;this.age = age;
}var obj = {};var person = new Person();
Person.call(obj, 'mary', 18); // 让 obj 也拥有构造函数的方法

call 的根本作用就是改变 this 指向，第一个参数就是 this 的指向

小案例

function Student(name, age, sex) {this.name = name;this.age = age;this.sex = sex;
}function Color(red, blue, pink) {this.red = red;this.blue = blue;this.pink = pink;
}function Model(height, width, len) {this.height = height;this.width = width;this.len = len;
}function Car(name, age, sex, red, blue, pink, height, width, len) {// var this = {//     // };Student.call(this, name, age, sex);Color.call(this, red, blue, pink);Model.call(this, height, width, len);
}var car = new Car('mary', 18, 'female', 'red', 'blue', 'pink', 175, 75, 175);

二、apply 方法

function Student(name, age, sex) {this.name = name;this.age = age;this.sex = sex;
}function Color(red, blue, pink) {this.red = red;this.blue = blue;this.pink = pink;
}function Model(height, width, len) {this.height = height;this.width = width;this.len = len;
}function Car(name, age, sex, red, blue, pink, height, width, len) {// var this = {//     // };Student.apply(this, [name, age, sex]);Color.apply(this, [red, blue, pink]);Model.call(this, height, width, len);
}var car = new Car('mary', 18, 'female', 'red', 'blue', 'pink', 175, 75, 175);

call 需要把实参按照形参的个数传进去

apply 需要传一个 arguments 实参列表

[].slice.call(arguments) -- 能将具有 length 属性的对象转换为数组

三、总结

call / apply 都是改变 this 指向，区别就是传参列表不同

改变 this 指向的 call 和 apply相关推荐

2022前端面经---改变this指向问题(call、apply、bind)
CSDN话题挑战赛第2期参赛话题:面试宝典 ✅ 作者简介:一名迈入大三的大学生,致力于提高前端开发能力 ✨ 个人主页:前端小白在前进的主页
函数的this指向，call,apply bind改变this指向
函数在定义的时候不会影响它的this指向,只有在调用的时候选择不同的调用方式,才会决定你this指向何处. 在独立函数调用的时候,this指向window,在调用挂载在window的函数时,前面的wi ...
js 改变this指向的几种方法（个人学习笔记）
1.call()和apply() 两中方法都能改变this指向,很类似,区别主要是第二个以后参数, call():第一个参数表示要把this指向的新目标,第二个之后的参数其实相当于传参,参数以,隔开 ...
this指向及改变this指向的方法
原先总结过this指向问题,但看了大佬们写的之后,觉得自己遗漏了很多点,所以,结合大佬们的,重写一遍一.函数的调用方式决定了 this 的指向不同: 1.普通函数调用,此时 this 指向 wind ...
this指向和如何改变this指向（详解）
注:颜色标识为重要字眼. 目录:-this详解 -改变this指向的方法一.this概述它是JS的关键词,是一个代词"指代不明",需要代码执行过程中根据 ...
JavaScript - this指向以及强行改变this指向
this 指向 -官方:指当前代码执行的上下文环境(context) -私人: 就是一个使用在作用域内(全局 / 函数内)的关键字全局作用域 this ->在全局作用域内,this就是wind ...
前端改变this指向的方法有哪些？如何判断this指向？
bind.call.apply.箭头函数.new.这些都可以改变this指向,他们之间的区别是 1.call 和 apply 的this指向 call 和 apply其实是一样的,区别在于传参的时候参 ...
如何改变this指向?
如何改变this指向? 在接触this指向问题,相信很多同学都面临this指向的问题,有些时候我们在对象方法内部使用this.而并不想让this指向当前本对象,这时候该怎么办呢?答案就是改变this指 ...
this指向改变this指向
1:全局下的 this 指向window 2:函数中的this 谁调用指向谁 3:事件处理函数中 this 谁触发指向谁 4:对象中this 默认指向当前对象 5:箭头函数中无this 但是如果箭头函 ...

改变 this 指向的 call 和 apply

改变 this 指向的 call 和 apply相关推荐

最新文章

热门文章