博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS基础:this的指向以及call、apply的作用
阅读量:4660 次
发布时间:2019-06-09

本文共 2801 字,大约阅读时间需要 9 分钟。

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 方法,bind 方法会返回一个新函数,称为绑定函数,当调用这个绑定函数时,绑定函数会以创建它时传入的第一个参数作为 this,传入的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。

示例三:

var boy1 = {  name: 'Bob',  age: 12}var getInfo = function() {  console.log(this.name + ' like ' + arguments[0] + ' and ' + arguments[1]);}.bind(boy1,'sing');getInfo('shopping');  //输出Bob like sing and shopping

示例四:模拟浏览器的 bind 方法

Function.prototype.bind = function(obj){    var self = this;    return function(){        return self.apply(obj,arguments);    }};var boy1 = {    name: 'Bob',    age: 12};var func = function(){    console.log(this.name+' like '+arguments[0]+' and '+arguments[1]);}.bind(boy1);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(); //输出Bobvar 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

 

转载于:https://www.cnblogs.com/blog-cxj2017522/p/8997800.html

你可能感兴趣的文章
kafka在zookeeper中的存储结构
查看>>
linux上FTP服务器搭建
查看>>
centos7关闭防火墙
查看>>
《C#高级编程》 读书笔记 -索引
查看>>
session cookie原理及应用
查看>>
ID3算法详解
查看>>
BZOJ1925: [Sdoi2010]地精部落
查看>>
学习进度条第十一周
查看>>
linux常用命令
查看>>
设置SQL PLUS环境
查看>>
关于虚拟机VM
查看>>
eclipse、tomca和jvm的相关内存配置
查看>>
python的迭代器
查看>>
spy memcached spring demo
查看>>
Python基础语法
查看>>
三年工作总结
查看>>
【SAS ADVANCE】Performing Queries Using PROC SQL
查看>>
Hive新功能 Cube, Rollup介绍
查看>>
webpack:(模块打包机)
查看>>
程序员不得不知的座右铭(世界篇)
查看>>