在JS中如何使用call、apply

php中世界最好的语言
Freigeben: 2018-05-23 14:07:09
Original
1442 Leute haben es durchsucht

这次给大家带来在JS中如何使用call、apply,在JS中使用call、apply的注意事项有哪些,下面就是实战案例,一起来看一下。

在具体的实际应用中,this 的指向无法在函数定义时确定,而是在函数执行的时候才确定的,根据执行时的环境大致可以分为以下3种:

1、当函数作为普通函数调用时,this 指向全局对象

2、当函数作为对象的方法调用时,this 指向该对象

3、当函数作为构造器调用时,this 指向新创建的对象

示例一:

window.name = 'myname'; function getName() { console.log(this.name); } getName(); //输出myname
Nach dem Login kopieren

示例二:

var boy = { name: 'Bob', getName: function() { console.log(this.name); } } boy.getName(); //输出Bob
Nach dem Login kopieren

示例三:

function Boy(name) { this.name = name; } var boy1 = new Boy('Bob'); console.log(boy1.name); //输出Bob
Nach dem Login kopieren

对于示例三,还有一种特殊情况,就是当构造函数通过 "return" 返回的是一个对象的时候,此次运算的最终结果返回的就是这个对象,而不是新创建的对象,因此 this 在这种情况下并没有什么用。

示例四:

function Boy(name) { this.name = name; return { //返回一个对象 name: 'Jack' } } var boy1 = new Boy('Bob'); console.log(boy1.name); //输出Jack
Nach dem Login kopieren

示例五:

function Boy(name) { this.name = name; return 1; //返回非对象 } var boy1 = new Boy('Bob'); console.log(boy1.name); //输出Bob
Nach dem Login kopieren

call 和 apply 的作用

apply 接受两个参数,第一个参数指定了函数体内 this 的指向,第二个参数是一个数组或类数组,用于传递被调用函数的参数列表。

示例一:

function getInfo() { console.log(this.name+' like '+arguments[0]+' and '+arguments[1]); } var boy1 = { name: 'Bob', age: 12 } getInfo.apply(boy1,['sing','swimming']); //输出Bob like sing and swimming
Nach dem Login kopieren

call 传入参数的数量是不固定的,跟 apply 相同的是,第一个参数也是用于指定函数体内 this 的指向,从第二个参数开始往后,每个参数被依次传入被调用函数。

示例二:

function getInfo() { console.log(this.name+' like '+arguments[0]+' and '+arguments[1]); } var boy1 = { name: 'Bob', age: 12 } getInfo.call(boy1,'sing','shopping'); //输出Bob like sing and shopping
Nach dem Login kopieren

此外,大部分高级浏览器还实现了 bind 方法,它与 call 和 apply 的区别在于 bind 只是改变函数内部 this 的指向,但不会立即执行,你需要显示调用它。

示例三:模拟浏览器的 bind 方法

Function.prototype.bind = function(obj){ var self = this; return function(){ return self.apply(obj,arguments); } }; var obj = { name: 'Bob', age: 12 }; var func = function(){ console.log(this.name+' like '+arguments[0]+' and '+arguments[1]); }.bind(obj); func('sing','shopping');
Nach dem Login kopieren

丢失的 this

在某些情况下会丢失 this 的指向,此时,我们就需要借助 call、apply 和 bind 来改变 this 的指向问题。

示例一:当 "getName" 方法作为 "boy" 对象的属性调用时,this 指向 "boy" 对象,当另外一个变量引用"getName" 方法时,因为它是作为普通函数调用,所以 this 指向全局对象window

var boy = { name: 'Bob', getName: function() { console.log(this.name); } } boy.getName(); //输出Bob var getBoyName = boy.getName; getBoyName(); //输出undefined
Nach dem Login kopieren

示例二:即使在函数内部定义的函数,如果它作为普通对象调用,this 同样指向 window 对象

var boy1 = { name: 'Bob', age: 12, getInfo: function() { console.log(this.name); function getAge() { console.log(this.age); } getAge(); } } boy1.getInfo(); //Bob //undefined
Nach dem Login kopieren

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

vue-element怎么做出音乐播放器

VueJs父子组件通讯方法汇总

Das obige ist der detaillierte Inhalt von在JS中如何使用call、apply. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!