资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/彻底掌握this,apply,call

彻底掌握this,apply,call

liangzai_cool / 2792人阅读

摘要：说起里面比较头疼的知识点的指向与的理解这三者肯定算的上前几好的开发者这是必须迈过的槛今天就总结下这三者紧密相连的关系首先推荐理解的用法格式，，，的传参个数不限第一个数表示调用函数函数体内的指向从第二个参数开始依次按序传入函数表示函数指向表示

说起js里面比较头疼的知识点,this的指向,call与apply的理解这三者肯定算的上前几,好的js开发者这是必须迈过的槛.今天就总结下这三者紧密相连的关系.

</>复制代码 
  1. 首先推荐理解call的用法

Function.prototype.call

格式:fx.call( thisArg [，arg1，arg2，… ] );

call的传参个数不限,第一个数表示调用函数(fx)函数体内this的指向.从第二个参数开始依次按序传入函数.

</>复制代码 
  1. var age = 40;
  2. var xiaoMing = {
  3.     age:30
  4. };
  5. var xiaoLi = {
  6.     age: 20
  7. };
  8. var getAge = function(){
  9.     console.log(this.age);
  10. };
  11.  getAge.call( xiaoMing );  //30 表示函数this指向xiaoMing
  12. getAge.call(xiaoLi);  //20  表示函数this指向xiaoLi
  13. getAge.call(undefined);//40  getAge.call(undefined)==getAge.call(null)
  14. getAge.call(null);//40
  15. getAge(); //40

如果我们传入fx.call()的第一个参数数为null,那么表示函数fx体内this指向宿主对象,在浏览器是Window对象,这也解释了getAge.call(undefined);//40。

**在此基础我们可以理解为 getAge()相当于getAge.call(null/undefined),扩展到所有函数,
fx()==fx.call(null) == fx.call(undefined)
**

值得注意的是严格模式下有点区别: this指向null

</>复制代码 
  1. var getAge = function(){
  2.     "use strict"
  3.     console.log(this.age);
  4. };
  5. getAge(null);//报错 age未定义
</>复制代码 
  1. 再来理解this的使用

this的常用场景:

this位于一个对象的方法内,此时this指向该对象

</>复制代码 
  1. var name = "window";
  2. var Student = {
  3.     name : "kobe",
  4.     getName: function () {
  5.         console.log(this == Student); //true
  6.         console.log(this.name);  //kobe
  7.     }
  8. }
  9. Student.getName();

this位于一个普通的函数内,表示this指向全局对象,(浏览器是window)

</>复制代码 
  1. var name = "window";
  2. var getName = function () {
  3.     var name = "kobe";  //迷惑性而已
  4.     return this.name;
  5. }
  6. console.log(  getName() ); //window

this使用在构造函数(构造器)里面,表示this指向的是那个返回的对象.

</>复制代码 
  1. var name = "window";
  2. //构造器
  3. var Student = function () {
  4.     this.name = "student";
  5. }
  6. var s1 = new Student();
  7. console.log(s1.name);  //student

注意: 如果构造器返回的也是一个Object的对象(其他类型this指向不变遵循之前那个规律),这时候this指的是返回的这个Objec.

</>复制代码 
  1. var name = "window";
  2. //构造器
  3. var Student = function () {
  4.     this.name = "student";
  5.     return {
  6.         name: "boyStudent"
  7.     }
  8. }
  9. var s1 = new Student();
  10. console.log(s1.name);  //boyStudent

this指向失效问题

</>复制代码 
  1. var name = "window";
  2. var Student = {
  3.     name : "kobe",
  4.     getName: function () {        
  5.         console.log(this.name);  
  6.     }
  7. }
  8. Student.getName(); // kobe
  9. var s1 = Student.getName;
  10. s1(); //window

原因: 此时s1是一个函数

</>复制代码 
  1. function () {        
  2.         console.log(this.name);  
  3.     }

对一个基本的函数,前面提过this在基本函数中指的是window.

在开发中我们经常使用的this缓存法 ,缓存当前作用域下this到另外一个环境域下使用

</>复制代码 
  1. 最后理解apply的用法 Function.prototype.apply

格式: fx.apply(thisArg [，argArray] ); // 参数数组，argArray

apply与call的作用是一样的,只是传参方式不同,

apply接受两个参数,第一个也是fx函数体内this的指向,用法与call第一个参数一致.第二个参数是数组或者类数组,apply就是把这个数组元素传入函数fx.

</>复制代码 
  2. var add = function (a ,b ,c) {
  3.     console.log(a +b +c);
  4. }
  5. add.apply(null , [1,2,3]); // 6

再吃透这个题目就ok

</>复制代码 
  1. var a=10;
  2. var foo={
  3.   a:20,
  4.   bar:function(){
  5.       var a=30;
  6.       return this.a;
  7.     }
  8. }
  9. foo.bar()
  10. //20
  11. (foo.bar)()
  12. //20
  13. (foo.bar=foo.bar)()
  14. //10
  15. (foo.bar,foo.bar)()
  16. //10

哪里说错或者有更好的理解希望大家指出来.共同进步.

GPU云服务器 云服务器 apply与call的区别 js中的call和apply JS中bind、call和apply的作 apply()

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80989.html

相关文章

  • JavaScript之例题中彻底理解this

    摘要：最后重点理解结论箭头函数的，总是指向定义时所在的对象，而不是运行时所在的对象。输出，箭头函数不会绑定所以传入指向无效。原因是，要彻底理解应该是建立在已经大致理解了中的执行上下文，作用域作用域链，闭包，变量对象，函数执行过程的基础上。 本文共 2025 字，看完只需 8 分钟 概述 前面的文章讲解了 JavaScript 中的执行上下文，作用域，变量对象，this 的相关原理，但是我...

    Hwg 评论0 收藏0

  • JS高级讲解面向对象，原型，继承，闭包，正则表达式，让你彻底爱上前端（进阶二）

    摘要：通过构造函数得到的实例对象内部会包含一个指向构造函数的对象的指针。 JavaScript 高级 学习目标: 理解面向对象开发思想 掌握 JavaScript 面向对象开发相关模式 掌握在 JavaScript 中使用正则表达式 面向对象介绍 程序中面向对象的基本体现 在 JavaScript 中，所有数据类型都可以视为对象，当然也可以自定义对象。自定义的对象数据类型就是面向对象中...

    Nino 评论0 收藏0

  • JS高级讲解面向对象，原型，继承，闭包，正则表达式，让你彻底爱上前端（进阶二）

    摘要：通过构造函数得到的实例对象内部会包含一个指向构造函数的对象的指针。 JavaScript 高级 学习目标: 理解面向对象开发思想 掌握 JavaScript 面向对象开发相关模式 掌握在 JavaScript 中使用正则表达式 面向对象介绍 程序中面向对象的基本体现 在 JavaScript 中，所有数据类型都可以视为对象，当然也可以自定义对象。自定义的对象数据类型就是面向对象中...

    source 评论0 收藏0

  • js 面试官想了解你有多理解call,apply,bind?

    摘要：返回值这段在下方应用中有详细的示例解析。回调函数丢失的解决方案绑定回调函数的指向这是典型的应用场景绑定指向，用做回调函数。 showImg(https://segmentfault.com/img/remote/1460000019971331?w=1024&h=680); 函数原型链中的 apply，call 和 bind 方法是 JavaScript 中相当重要的概念，与 this...

    wuaiqiu 评论0 收藏0

发表评论

登陆后可评论

0条评论

liangzai_cool

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<