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 相关文章推荐
jquery图片上下tab切换效果
Mar 18 Javascript
基于jquery实现漂亮的动态信息提示效果
Aug 02 Javascript
最常用的12种设计模式小结
Aug 09 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
Dec 09 Javascript
jQuery中[attribute]选择器用法实例
Dec 31 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
Aug 22 Javascript
jQuery检测滚动条是否到达底部
Dec 15 Javascript
学习JavaScript设计模式之单例模式
Jan 19 Javascript
jQuery简单倒计时效果完整示例
Sep 20 Javascript
Javascript 普通函数和构造函数的区别
Nov 05 Javascript
vue-router路由参数刷新消失的问题解决方法
Jun 17 Javascript
通过实例讲解JS如何防抖动
Jun 15 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高手?学会“懒惰”的编程
2006/12/05 PHP
PHP 判断变量类型实现代码
2009/10/23 PHP
PHP简单实现无限级分类的方法
2016/05/13 PHP
jQuery文本框(input textare)事件绑定方法教程
2013/04/24 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
基于豆瓣API+Angular开发的web App
2015/01/02 Javascript
动态加载jQuery的两种方法实例分析
2015/07/17 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
2016/12/25 Javascript
JS实现的全排列组合算法示例
2017/10/09 Javascript
jQuery使用bind函数实现绑定多个事件的方法
2017/10/11 jQuery
基于zTree树形菜单的使用实例
2017/12/25 Javascript
用vue快速开发app的脚手架工具
2018/06/11 Javascript
taro开发微信小程序的实践
2019/05/21 Javascript
JS函数进阶之prototy用法实例分析
2020/01/15 Javascript
JavaScript对象字面量和构造函数原理与用法详解
2020/04/18 Javascript
微信小程序实现简单文字跑马灯
2020/05/26 Javascript
Vue中watch、computed、updated三者的区别及用法
2020/07/27 Javascript
JS图片懒加载技术实现过程解析
2020/07/27 Javascript
[03:48]显微镜下的DOTA2第四期——TP动作
2014/06/20 DOTA
在Python中操作列表之List.pop()方法的使用
2015/05/21 Python
详解Appium+Python之生成html测试报告
2019/01/04 Python
Django框架模板的使用方法示例
2019/05/25 Python
Python新手如何进行闭包时绑定变量操作
2020/05/29 Python
美国专注于健康商品的网站:eVitamins
2017/01/23 全球购物
丝芙兰香港官网:Sephora香港
2018/03/13 全球购物
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
英国最好的包装供应商:Priory Direct
2019/12/17 全球购物
夏季奶茶店创业计划书
2014/01/16 职场文书
大学生个人先进事迹材料范文
2014/05/03 职场文书
授权委托书
2014/09/17 职场文书
实习证明格式范文
2014/10/14 职场文书
2015年度残疾人工作总结
2015/05/14 职场文书
班主任班级管理心得体会
2016/01/07 职场文书
Python+Appium新手教程
2021/04/17 Python
Redis 哨兵集群的实现
2021/06/18 Redis
Java 中的 Lambda List 转 Map 的多种方法详解
2022/07/07 Java/Android