JS基础:this的指向以及call、apply的作用

内容预览:
  • this 的指向   在具体的实际应用中,this 的指向无法在函数定义时确定...~
  • 示例四: function Boy(name) { this.name = name; return { //返回一个...~
  • 示例二: function getInfo() { console.log(this.name+' like '+argume...~

this 的指向

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

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

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

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

示例一:

window.name = 'myname';

function getName() {
console.log(
this.name);
}
getName();
//输出myname

示例二:

var boy = {

name:
'Bob',
getName:
function() {
console.log(
this.name);
}
}
boy.getName();
//输出Bob

示例三:

function Boy(name) {

this.name = name;
}
var boy1 = new Boy('Bob');
console.log(boy1.name);
//输出Bob

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

示例四:

function Boy(name) {

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

示例五:

function Boy(name) {

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

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

  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

  此外,大部分高级浏览器还实现了 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');

丢失的 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();
//输出undefind

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

var boy1 = {

name:
'Bob',
age:
12,
getInfo:
function() {
console.log(
this.name);
function getAge() {
console.log(
this.age);
}
getAge();
}
}
boy1.getInfo();
//Bob
//undefind

 

以上就是:JS基础:this的指向以及call、apply的作用 的全部内容。

本站部分内容来源于互联网和用户投稿,如有侵权请联系我们删除,谢谢。
Email:[email protected]


0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论