一些应该掌握的知识点
this是JS中的一个关键字,它代表函数运行时自动生成的一个内部对象,且只能在函数内部使用
一个this案例展示this的普通用法
“` JavaScript
var sample = {
x: ‘sample’,
show: function () {
console.log(this.x);
}
}show(); //控制台显示sample
“`假设有函数sample,可知sample.call()等同于sample();
call和apply都用于指定this的指向,也可以理解为指定this的指向
- 一个call案例展示call的普通用法
var a = { x: 'A', show: function () { console.log(this); } } a.show(); //此时this指向对象a,控制台显示x的值为字符串"A" var c = a.show; //把对象a中的show属性(也是show函数)赋予变量c,注1 var b = { x: 'B' } a.show.call(b); //此时this指向对象b,控制台显示x的值为字符串"B" c(); //由注1可知,此时this指向window,因此控制台显示对象window
- 一个call案例展示call的普通用法
call可用于借助他人之手来办事
一个阿妈请阿爸教训不听话的儿子的案例
function Mom () { Dad.call(this); //阿妈请阿爸教训不听话的儿子 } function Dad () { this.teachSon1 = '儿子大哭'; //教育手段 this.teachSon2 = '儿子大叫'; } function Son () { Mom.call(this); this.getTeach = function () { //不听话的儿子能被教育 this.reaction1 = this.teachSon1; this.reaction2 = this.teachSon2; } this.show = function () { //展示不听话的儿子被教育的反应 this.getTeach(); console.log(this.reaction1, this.reaction2); } } var son = new Son(); son.show(); //控制台显示儿子大哭、儿子大叫
由上例可看出这种call的使用方式也是一种继承
call和apply的区别和传参用法
- call和apply不仅可以用来指定this的指向,还可以用来传参数,
- call和apply两者本质作用相同,区别仅仅是后面所传的参数形式不同
- 一个案例阐述call和apply的传参用法和区别
var A = { tag: 'Object A', show: function (x, y) { console.log(x, y, this.tag); } } var B = { tag: 'Object B' } A.show.call(null, 1, 2); /* 用.call方式指定this的指向 同时传参数,由于call中首参 为null,所以此时this的指向 为对象window,控制台显示 1, 2, undefined */ A.show.call(B, 1, 2); /* 由于call中首参为B,所以此时 this的指向为对象B,控制台 显示1, 2, Object B*/ A.show.apply(A, [1, 2]); /* apply与call的区别是, apply用于传参时所传参数 用数组来传, 控制台显示 1, 2, Object A*/