函数内部的this指向/call()方法

一、call()方法

Function.prototype.call() - JavaScript | MDNcall() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call以上为MDN中关于call方法的文档。

call()方法调用一个对象，简单理解为调用函数的方式，但是它可以改变函数的this指向
fun.call(thisArg,arg1,arg2,.....)
thisArg: 在 fun 函数运行时指定的 this 值
arg1,arg2: 传递的其他参数
返回值就是函数的返回值，因为它就是调用函数
因此当我们想改变 this 指向，同时想调用这个函数的时候，可以使用 call，比如继承

1、call()的经典用法

<body><script>// 改变函数内this指向  js提供了三种方法  call()  apply()  bind()// 1. call()var o = {name: 'andy'}function fn(a, b) {console.log(this);console.log(a + b);};fn.call(o, 1, 2);// call 第一个可以调用函数 第二个可以改变函数内的this 指向// call 的主要作用可以实现继承function Father(uname, age, sex) {this.uname = uname;this.age = age;this.sex = sex;}function Son(uname, age, sex) {Father.call(this, uname, age, sex);}var son = new Son('刘德华', 18, '男');console.log(son);</script>
</body>

二、call()里面的参数解读

var arr = [1,2,3,4]function fn(i){return i>2
}for(var i in arr){console.log(fn.call(null,arr[i]));//false false true true
}

我们首先来看一下这句话

fn.call(null,arr[i])

thisArg: 在 fun 函数运行时指定的 this 值

第一个参数的null就是不指定this的指向，所以将null改为fn不影响最终结果。

arg1,arg2: 传递的其他参数，这些参数会传给call方法的调用者，当调用者的实参。

第二个参数arr[i]就是从数组arr中循环遍历的一个具体数组项，这个arr[i]将会当成参数传给fn，也就是后面会去比较的i>2。

三、例子

请补全JavaScript代码，要求实现Array.filter函数的功能且该新函数命名为"_filter"。示例

输入：[1,2]._filter(i => i>1)

输出：[2]

题目分析：

Array.prototype.filter() - JavaScript | MDNhttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/filter以上为MDN数组内置方法filter()的具体文档。

（1）本题需要扩展Array的内置对象方法：

Array.prototype._filter = function(fn){//1、判断fn是否为方法if (typeof fn !== 'function') {throw new TypeError('should be function')}
}

根据题目要求，实现一个仿Array.filter功能的"Array._filter"函数，该函数创建一个新数组，该数组包含通过函数参数条件的所有元素，核心步骤有：

判断参数是否为函数，如果不是则直接返回

创建一个空数组用于承载新的内容

循环遍历数组中的每个值，分别调用函数参数，将满足判断条件的元素添加进空数组中

返回新的数组

// 补全代码{
Array.prototype._filter = function(fn){//1、判断fn是否为方法if (typeof fn !== 'function') {throw new TypeError('should be function')}//2、创建一个新数组接收过滤后的值const newArray = []//3、循环遍历数组中的每个值，分别调用函数参数，将满足判断条件的元素添加进空数组中//（1）拿到数组,此处的this为函数的调用者Arraylet arr = this//（2）将满足判断条件的元素添加进空数组中for(var i=0; i<arr.length; i++){let result = fn.call(arguments[0], arr[i], i, arr);//将arguments[0]改为null亦可result && newArray.push(arr[i])}console.log(newArray);//[2]return newArray;
}var arr = [1,2]
arr._filter(i => i>1)

4、实现call函数

call()方法调用一个对象，简单理解为调用函数的方式，但是它可以改变函数的this指向
fun.call(thisArg,arg1,arg2,.....)
thisArg: 在 fun 函数运行时指定的 this 值
arg1,arg2: 传递的其他参数
返回值就是函数的返回值，因为它就是调用函数
因此当我们想改变 this 指向，同时想调用这个函数的时候，可以使用 call，比如继承

//1.获取调用该方法的对象，将this赋给对象参数，可以任意命名；即把Product构造函数当作Food的一个属性
//2.通过该对象参数临时调用函数并返回结果；返回的是Product的返回值
//3.最后删除对象参数的临时函数属性Function.prototype._call = function (obj, ...args) {// console.log(obj);//Food方法// console.log(args);//['包子',12] obj.fn = this;//this为Product方法,现在把Product方法内置为Food的方法var res = obj.fn(...args);//调用传过来的参数['包子',12]console.log(res);//1 返回call调用者的返回值，若没有返回值，则返回undifineddelete obj.fn;//删除掉Product方法return res;//同时接收函数的返回值，没有返回值则返回undefined
}function Product(name,price){this.name = name;this.price = price;return 1;
}function Food(name,price){Product._call(this,name,price);// Product._call(Food,'包子',12);this.category = 'food';
}var bz = new Food('包子',12);
console.log(bz);//Food {name: '包子', price: 12, category: 'food'}

call函数就是把调用者的代码再用新的this指向的值运行一遍，其他的参数是传递的参数。返回的是调用者的返回值。

变相的实现了继承的功能。

Function.prototype._call = function (obj, ...args) {// console.log(obj);//Food方法// console.log(args);//['包子',12] obj.fn = this;//this为Product方法,现在把Product方法内置为Food的方法var res = obj.fn(...args);//调用传过来的参数['包子',12]console.log(res);//1 返回call调用者的返回值，若没有返回值，则返回undifineddelete obj.fn;//删除掉Product方法return res;//同时接收函数的返回值，没有返回值则返回undefined
}const o1 = {name: 'z',fn: function() {return this.name}
};const o2 = {name: 'g'};const result = o1.fn._call(o2);console.log(result === 'g')//true

函数内部的this指向/call()方法相关推荐

python在函数内部访问外部全局变量的方法_在函数外部访问函数变量，而无需使用“全局”...
您可以按照以下方式做一些事情(在我测试它们时,它们在Python v2.7.15和v3.7.1中均有效): def hi(): # other code... hi.bye = 42 # Creat ...
ES6/03/函数的定义方式和调用方式，函数内的this指向，改变函数中this指向的三个方法(call(),apply(),bind())
函数的定义方式 1,自定义函数(命名函数) function fun(){}; 2,函数表达式(匿名函数) var fun =function(){}; 3,利用new Function( '参数1' ...
c语言函数修改指针本身,C语言函数内部改变指针本身
今天发一个C语言基础的小知识点:C语言中函数参数传递方式只有一种:值传递. 可能大家在刚开始学习C的时候都被一些教材误导,认为C中有值传递和地址传递两种方式.其实只有值传递一种,无论函数以什么形式进行 ...
JS回调函数中的this指向
什么是this:自动引用正在调用当前方法的.前的对象. this指向的三种情况 obj.fun() fun中的this->obj,自动指向.前的对象 new Fun() Fun中的this-&g ...
ES6/02/创建对象，构造函数和原型，原型和原型链，this指向，类，ES5新增的方法，数组方法，回调函数，ES5新增的字符串方法，ES5中新增的对象方法
创建对象 1,利用new Object()创建对象 var obj1 =new Object(); 2,利用对象字面量创建对象 var obj2={}; 3,利用构造函数创建对象 function S ...
vue的methods属性的方法中出现回调函数，在回调函数内部获取data中的数据
在vue中,可能会遇到在methods属性中书写的方法中出现回调函数的情况,如以下代码: data(){return{gemometry: ""} } methods: {draw ...
C++57个入门知识点_40 常成员函数（用于定义不可修改类内部成员变量的函数，一般用来修饰Get函数；常成员函数this指针：const T* const；常成员函数内部变量修改方法：强转/关键字）
前面我们已经学习了C++中重要的知识点,特别是虚函数可能会有些懵逼,但是需要我们在实践中不断的理解和尝试,写代码是进步最快的方式,接下来将会介绍一些简单但很重要的知识点,本篇介绍常成员函数. 总结: ...
函数的参数-在函数内部使用方法修改可变参数会影响外部实参
def demo(num_list):print("函数内部的代码")# 使用方法修改列表的内容num_list.append(9)print(num_list)print(&qu ...
visualGDB配合VS2015使用，出现函数内部局部变量无法跳转到定义的解决方法。
visualGDB配合VS2015使用,出现函数内部局部变量无法跳转到定义的解决方法. 原因:从其它地方拷贝过来的VS工程在自己的电脑上编译时可能出现找不到交叉编译工具.ip不同等问题. 解决方案:如 ...

函数内部的this指向/call()方法

一、call()方法

函数内部的this指向/call()方法相关推荐

最新文章

热门文章