JS中this的指向以及call、apply的作用

 更新时间:2018年05月06日 14:36:12   投稿:laozhang  
本篇文章给大家分享了JS基础内容this指向以及call、apply的相关知识点内容,有兴趣的朋友可以学习参考下。

在具体的实际应用中,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

相关文章

  • window.requestAnimationFrame是什么意思,怎么用

    window.requestAnimationFrame是什么意思,怎么用

    window.requestAnimationFrame 告诉浏览器您要执行的动画并且请求浏览器的在下一个动画帧重绘窗口,方法在浏览器重绘之前作为一个回调函数被调用,就是告诉浏览器在刷新屏幕的时候,调用这个方法
    2013-01-01
  • 超详细的JavaScript基本语法规则

    超详细的JavaScript基本语法规则

    这篇文章主要介绍了JavaScript基本语法规则,保姆级的详细教程,万字长文详细的列出了JavaScript的各种语法,建议收藏系列,希望可以有所帮助
    2021-08-08
  • JavaScript高级程序设计(第3版)学习笔记2 js基础语法

    JavaScript高级程序设计(第3版)学习笔记2 js基础语法

    这一篇复习一下ECMAScript规范中的基础语法,英文好的朋友可以直接阅读官方文档。JavaScript本质上也是一种类C语言,熟悉C语言的朋友,可以非常轻松的阅读这篇文章,甚至都可以跳过,不过建议你最好还是看一看,在介绍的同时,我可能会引用一些自认为不易理解且比较流行的用法。
    2012-10-10
  • 在javaScript中关于submit和button的区别介绍

    在javaScript中关于submit和button的区别介绍

    submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了,submit和button,二者都以按钮的形式展现,看起来都是按钮,所不同的是type属性和处发响应的事件上
    2013-10-10
  • Web面试常问回流reflow与重绘repaint原理及区别

    Web面试常问回流reflow与重绘repaint原理及区别

    本文主要为大家讲解了浏览器的渲染机制回流与重绘的原理,有需要的朋友可以借鉴参考下,希望可以有所帮助,祝大家多多进步早日升职加薪
    2021-09-09
  • 关于JavaScript 原型链的一点个人理解

    关于JavaScript 原型链的一点个人理解

    本文给大家分享的是个人关于JavaScript原型链相关知识的一些理解,这里推荐给大家,希望大家能够喜欢
    2016-07-07
  • JavaScript入门教程(7) History历史对象

    JavaScript入门教程(7) History历史对象

    JavaScript中的History历史对象包含了用户已浏览的 URL 的信息,是指历史对象指浏览器的浏览历史。
    2009-01-01
  • fromCharCode和charCodeAt 方法

    fromCharCode和charCodeAt 方法

    fromCharCode和charCodeAt 方法...
    2006-12-12
  • 浅谈javascript中的constructor

    浅谈javascript中的constructor

    下面小编就为大家带来一篇浅谈javascript中的constructor。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • 走出JavaScript初学困境—js初学

    走出JavaScript初学困境—js初学

    利用空闲几天把《JavaScript权威指南》安静的读了一篇。真是一本好书呀!呵呵,这句话见的太多了。好在什么地方呢?听我慢慢道来。
    2008-12-12

最新评论