Javascript浅谈之引用类型

2019-11-20 21:26:17

字体：大中小

来源：转载

供稿：网友

简介
1.引用类型（Reference type）
引用类型是javascript中一种内部类型。它主要是当做一个指代，代替一个变量或者函数，当然在需要真实值时，又可以通过它寻找到真实值。

2.引用类型的结构
引用类型的值时由两部分构成，一是引用类型的值指代的对象的所属对象，这里我们姑且把它叫做base，二是base中的指代对象的对象名称。用伪代码来表示：

var valueOfReferenceType = {
base: <base object>,
propertyName: <property name>
};

3.使用情景
引用类型的使用情景有二：

(1)在处理一个标示符时

标示符是变量名，函数名，函数参数名和全局对象中未识别的属性名。

(2)在处理一个属性访问器时

复制代码代码如下:

var foo = 10;
function bar( ){}

在操作的中间结果中，引用类型对应

复制代码代码如下:

var fooReference = {
        base: global,
        propertyName: 'foo'
    };

    var barReference = {
        base: global,
        propertyName: 'bar'
    };

这里还是有必要解释一下base，在javascript中所有对象或者函数都有所属对象，看过我前面文章的人都知道，在每个执行上下文有个变量对象专门来管理这个执行上下文中的变量或者函数。

所以，当处理标示符时：

在全局上下文中，毋庸置疑，base === globalVO === gloabal

在函数的执行上下文中，base === VO/AO

但处理对象属性是：

这个更是简单，base === owerObject

4.获取引用类型的真正值
一开始我们说了，引用类型只是一个指代，而不是它并不保存真正的值。当需要真正的值时，可以通过内部一系列算法，可以得到。这个算法，我们可以用简单的伪代码来描述：

复制代码代码如下:

function GetValue(value) {

  if (Type(value) != Reference) {
    return value;
  }

  var base = GetBase(value);

  if (base === null) {
    throw new ReferenceError;
  }

  return base.[[Get]](GetPropertyName(value));

}

内部的[[Get]]方法返回对象属性真正的值，包括对原型链中继承的属性分析。所有通过GetValue我们也可以轻松获取引用类型的真正的值。如下例：

复制代码代码如下:

GetValue(fooReference); // 10
GetValue(barReference); // function object "bar"

那我们什么时候需要获取引用类型的真正值呢？

一般是在引用类型需要进行赋值、参与运算或者被调用是需要通过GetValue方法获取真正值。（注意：通过GetValue获取到的对象不再是引用类型）

引用类型与this的关系
引用类型主要是跟函数上下文中的this指向关系密切，且不同时候看起来还差异挺大，所有我们才引出引用类型来专门解释函数上下文中this的表现。

函数上下文中确定this值的通用规则如下：

在一个函数上下文中，this由调用者提供，由调用函数的方式来决定。如果调用括号()的左边是引用类型的值，this将设为引用类型值的base对象（base object），在其他情况下（与引用类型不同的任何其它属性），这个值为null。不过，实际不存在this的值为null的情况，因为当this的值为null的时候，其值会被隐式转换为全局对象。注：第5版的ECMAScript中，已经不强迫转换成全局变量了，而是赋值为undefined。

下面我们根据调用括号左边不同分三种情况进行讨论：

(1)调用括号左边是引用类型的值

这无需作过多分析，base对象就是this值，找到base即可。如果是全局变量下申明的，那就指向全局对象。

复制代码代码如下:

var myObject = {
     foo : function(){
            console.log(this);
      }
}

myObject.foo(); //毫无疑问，这个foo的base是myObject，故foo方法中的this指向myObject。

(2)调用括号左边是引用类型的值，不过这个值为null

复制代码代码如下:

function myFunction() {
     var foo = function(){
            console.log(this);
      }
       foo();    //AO.foo() => null.foo()
}

myFunction(); //输出:Window {top: Window, window: Window...}

当一个内部函数被调用时，这个内部函数的base应该是当前执行上下文中活动对象（OA），但是在javascript内部在OA作为base时，都当做null处理，javascript当然不允许this为null的情况发生，所有就将base设置为global对象（这是前文this函数调用模式中设计错误的源头）。所以在这情况下，this都指向全局对象。

(3)调用括号左边不是引用类型的值

复制代码代码如下:

//简单点的例子
(function () {
console.log(this); // null => global
})();

//复杂些的例子
var foo = {
bar: function () {
console.log(this);
}
};

foo.bar(); // Reference, OK => foo
(foo.bar)(); // Reference, OK => foo

(foo.bar = foo.bar)(); // global
(false || foo.bar)(); // global
(foo.bar, foo.bar)(); // global

当调用括号的左边不是引用类型而是其它类型，this自动设置为null，结果为全局对象。

第一个例子中，立即函数，它的函数调用小括号左边是一个表达式，不是一个引用。

第二个例子复杂了许多，我们来一个个分析：

foo.bar()，这个没有疑问，base为foo，this指向foo。

(foo.bar)()，这里用到了一个小括号，它在这起到分组符作用，也就是它不会迫使引用类型执行GetValue方法，其执行结果，跟上面一模一样。

后面三个，小括号里面依次是赋值运算、或运算和逗号运算，它们都会迫使引用类型执行GetValue方法，从而返回一个函数对象。这样，函数调用小括号左边就不再是引用类型了，所有，this都是指向全局对象的。

总结

关于引用类型，其实我都一直不太了解这个，只是看到汤姆大叔的博客中this那章，为了解释函数调用模式中this的取值原理且专门分析了一下，这一分析可不得了，我之前一直认为引用类型和引用传值应该存在某些关系，没想到，它大叔bolg中只是用来辅助理解this。至于他们二者之前有没有关系，如果有关系到底是一种什么关系，这还得我继续学习研究。

希望大家多交流。在此还是的感谢汤姆大叔.

上一篇：浅谈Javascript 执行顺序

下一篇：浅析JQuery UI Dialog的样式设置问题