穷究JavaScript——函数挪用与this详解

2024年5月21日 116次阅读 来源: staven

this

  JavaScript的this老是指向一个对象,而这个对象是基于函数运行时动态绑定的，并不是函数声明时绑定。

函数挪用体式格局

  1. 作为对象的要领挪用
  2. 作为一般函数举行挪用
  3. 作为组织器举行挪用
  4. 经由过程apply()或call()要领举行挪用

函数参数

  一切函数挪用都邑通报两个隐式参数：arguments和this。
  所谓隐式，也就意味着这些参数不会显现列在函数署名里，然则它们默默地通报给函数并存在于函数作用域内。在函数内部，它们能够像其他显式定名的参数一样运用。

arguments参数

  arguments参数是通报给函数的一切参数的一个鸠合。该鸠合有一个length属性，其值是悉数参数的个数，单个参数值能够像接见数组索引一样举行猎取。
  但要防止将arguments参数作为数组举行挪用。能够应用Array.prototype.slice.call(arguments, 0)将arguments参数转换为数组;

this参数

  this参数援用了与该函数挪用举行隐式关联的一个对象，被称之为函数上下文。

this指向

作为对象要领举行挪用

  当函数作为对象的要领被挪用时，this指向该对象。该对象就成了函数上下文。

window.name = 'global';

var obj = {
    name: 'staven',
    getName: function () {
        return this.name;
    }
};
//作为对象要领挪用
console.log(obj.getName());   //staven

作为一般函数举行挪用

  一种体式格局挪用，函数的上下文时全局上下文——window对象。

window.name = 'global';

var obj = {
    name: 'staven',
    getName: function () {
        return this.name;
    }
};
//作为对象要领挪用
console.log(obj.getName());   //staven
//将函数援用指针赋给getName变量
var getName = obj.getName;
//作为一般函数挪用
console.log(getName());   //global

  罕见的一种情况是，函数中的某个函数内部的this指向的是全局对象。处理这类题目，可var that = this;内部函数运用that替代this。

作为组织器举行挪用

  将函数作为组织器举行挪用，我们要在函数挪用前运用new关键字。其上下文是新建立的对象实例。
  组织器挪用时，以下特别行动会发作：

  • 建立一个新的空对象
  • 通报给组织器的对象是this参数，从而成为组织器的函数上下文。
  • 假如没有显式的返回值，新建立的对象则作为组织器的返回值举行返回。

  组织器的目标是要建立一个新对象并对其举行设置，然后将其作为组织器的返回值举行返回，是经由过程函数挪用初始化建立新对象。

var Person = function () {
    this.name = "staven";
};

var obj = new Person();
console.log(obj.name);  //staven

  假如组织器显式返回了一个对象，那末此次运算终究返回这个对象，而不是this。

var Person = function () {
    this.name = "staven";
    return {
        name: 'backedName'
    }
};

var obj = new Person();
console.log(obj.name);  //backedName

  假如组织器不显式返回任何数据，或返回的非对象数据，就不会存在上述题目。

var Person = function () {
    this.name = "staven";
    return 'backedName';
};

var obj = new Person();
console.log(obj.name);  //staven

apply()或call()要领举行挪用

  经由过程call或apply挪用函数，被挪用的函数的this指向第一个参数指向的this。上下文可设为恣意值。每一个函数都有apply()和call()要领，运用个中一个要领，都能够显现指定任何一个对象作为其函数上下文。
  经由过程函数的apply()要领来挪用函数，我们要给apply()传入两个参数：一个是作为函数上下文的对象，别的一个是作为函数参数所构成的数组。call()要领的运用体式格局相似，唯一差别的是，给函数传入的参数是一个参数列表，而不是单个数组。
  当运用 call 或许 apply 的时刻，假如我们传入的第一个参数为null，函数体内的 this 会指向默许的宿主对象。

var obj1 = {
    name: 'jsor',
    getName: function () {
        return this.name;
    }
};

var obj2 = {
    name: 'staven'
};

console.log(obj1.getName());        //jsor
console.log(obj1.getName.call(obj2));   //staven
    原文作者：staven
    原文地址: https://segmentfault.com/a/1190000007946051
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞