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


Posted in Javascript onMay 06, 2018

在具体的实际应用中,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
Javascript 相关文章推荐
js客户端快捷键管理类的较完整实现和应用
Jun 08 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
Apr 03 Javascript
简单解析JavaScript中的__proto__属性
May 10 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
Jul 22 Javascript
Three.js学习之文字形状及自定义形状
Aug 01 Javascript
微信小程序 共用变量值的实现
Jul 12 Javascript
用vue封装插件并发布到npm的方法步骤
Oct 18 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
解决Vue中mounted钩子函数获取节点高度出错问题
May 18 Javascript
vue生成文件本地打开查看效果的实例
Sep 06 Javascript
简单使用webpack打包文件的实现
Oct 29 Javascript
javascript实现京东快递单号的查询效果
Nov 30 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
May 06 #Javascript
Less 安装及基本用法
May 05 #Javascript
es6新特性之 class 基本用法解析
May 05 #Javascript
JS同步、异步、延迟加载的方法
May 05 #Javascript
JavaScript生成指定范围随机数和随机序列的方法
May 05 #Javascript
JS文件中加载jquery.js的实例代码
May 05 #jQuery
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
May 05 #Javascript
You might like
php header Content-Type类型小结
2011/07/03 PHP
linux实现php定时执行cron任务详解
2013/12/24 PHP
在Ubuntu 14.04上部署 PHP 环境及 WordPress
2014/09/02 PHP
利用PHP如何写APP接口详解
2016/08/23 PHP
php使用event扩展的io复用测试的示例
2020/10/20 PHP
Prototype1.5 rc2版指南最后一篇之Position
2007/01/10 Javascript
JavaScript中“+”的陷阱深刻理解
2012/12/04 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
Javascript中With语句用法实例
2015/05/14 Javascript
JavaScript中用于生成随机数的Math.random()方法
2015/06/15 Javascript
js实现卡片式项目管理界面UI设计效果
2015/12/08 Javascript
Javascript基础_简单比较undefined和null 值
2016/06/14 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
2016/12/08 Javascript
聊聊Vue.js的template编译的问题
2017/10/09 Javascript
JavaScript面试出现频繁的一些易错点整理
2018/03/29 Javascript
AngularJS ui-router刷新子页面路由的方法
2018/07/23 Javascript
element ui 表格动态列显示空白bug 修复方法
2018/09/04 Javascript
JavaScript实现连连看连线算法
2019/01/05 Javascript
Angular7.2.7路由使用初体验
2019/03/01 Javascript
详解Vue-Router源码分析路由实现原理
2019/05/15 Javascript
vue组件三大核心概念图文详解
2019/05/30 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
vue使用video插件vue-video-player的示例
2020/10/03 Javascript
[01:32:50]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第一场 1月25日
2021/03/11 DOTA
pyqt5自定义信号实例解析
2018/01/31 Python
python字符串Intern机制详解
2019/07/01 Python
解决python父线程关闭后子线程不关闭问题
2020/04/25 Python
Python-jenkins 获取job构建信息方式
2020/05/12 Python
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
2014/06/11 HTML / CSS
h5封装下拉刷新
2020/08/25 HTML / CSS
WINDOWS域的具体实现方式是什么
2014/02/20 面试题
一夜的工作教学反思
2014/02/08 职场文书
公务员上班玩游戏检讨书
2014/09/17 职场文书
2015元旦家电促销活动策划方案
2014/12/09 职场文书
python绘制箱型图
2021/04/27 Python
Redis中缓存穿透/击穿/雪崩问题和解决方法
2021/12/04 Redis