puddlejumper26 / blogs

Personal Tech Blogs
4 stars 1 forks source link

JavaScript 中 call()、apply()、bind() 的用法 #178

Open puddlejumper26 opened 3 years ago

puddlejumper26 commented 3 years ago

https://www.cnblogs.com/coco1s/p/4833199.html

其实是一个很简单的东西,认真看十分钟就从一脸懵B 到完全 理解!

先看明白下面:

例 1

image

obj.objAge; // 17 obj.myFun() // 小张年龄 undefined

例 2

image

shows() // 盲僧 

比较一下这两者 this 的差别,第一个打印里面的 this 指向 obj,第二个全局声明的 shows() 函数 this 是 window ;

1,call()、apply()、bind() 都是用来重定义 this 这个对象的!

如: image

obj.myFun.call(db);    // 德玛年龄 99 obj.myFun.apply(db);    // 德玛年龄 99 obj.myFun.bind(db)();   // 德玛年龄 99

以上出了 bind 方法后面多了个 ( ) 外 ,结果返回都一致!

由此得出结论,bind 返回的是一个新的函数,你必须调用它才会被执行。

2,对比call 、bind 、 apply 传参情况下 image   obj.myFun.call (db, '成都','上海');     // 德玛 年龄 99 来自 成都去往上海 obj.myFun.apply (db, ['成都','上海']); // 德玛 年龄 99 来自 成都去往上海
obj.myFun.bind (db, '成都','上海')(); // 德玛 年龄 99 来自 成都去往上海 obj.myFun.bind (db, ['成都','上海'])();    // 德玛 年龄 99 来自 成都, 上海去往 undefined  

从上面四个结果不难看出:

call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象,第二个参数差别就来了: