蝙蝠岛资源网

JS中this的指向以及call、apply的作用
网络编程 2025/1/10 佚名
2 0
蝙蝠岛资源网 Design By www.hbtsch.com

在具体的实际应用中，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(); //输出undefined

示例二：即使在函数内部定义的函数，如果它作为普通对象调用，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

标签：
this,call,apply
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com

评论“JS中this的指向以及call、apply的作用”

暂无JS中this的指向以及call、apply的作用的评论...
www.hbtsch.com 蝙蝠岛资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
蝙蝠岛资源网 Design By www.hbtsch.com