Javascript浅谈之引用类型


Posted in Javascript onDecember 18, 2013

简介
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 相关文章推荐
百度 popup.js 完美修正版非常的不错 脚本之家推荐
Apr 17 Javascript
实现变速回到顶部的JavaScript代码
May 09 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
Feb 25 Javascript
jQuery中:button选择器用法实例
Jan 04 Javascript
实例详解jQuery结合GridView控件的使用方法
Jan 04 Javascript
原生javascript实现图片无缝滚动效果
Feb 12 Javascript
javascript每日必学之继承
Feb 23 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
Sep 25 Javascript
angularjs 的数据绑定实现原理
Jul 02 Javascript
JavaScript实现图片轮播特效
Oct 23 Javascript
JS实现烟花爆炸效果
Mar 10 Javascript
小程序富文本提取图片可放大缩小
May 26 Javascript
浅析JQuery UI Dialog的样式设置问题
Dec 18 #Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
Dec 18 #Javascript
jQuery.event兼容各浏览器的event详细解析
Dec 18 #Javascript
jquery中event对象属性与方法小结
Dec 18 #Javascript
深入理解jQuery中live与bind方法的区别
Dec 18 #Javascript
解析JSON对象与字符串之间的相互转换
Dec 18 #Javascript
cookie中的path与domain属性详解
Dec 18 #Javascript
You might like
PHP封装的HttpClient类用法实例
2015/06/17 PHP
PHP运行模式汇总
2016/11/06 PHP
PHP设计模式之单例模式原理与实现方法分析
2018/04/25 PHP
php成功操作redis cluster集群的实例教程
2019/01/13 PHP
Laravel5.1 框架响应基本用法实例分析
2020/01/04 PHP
createElement动态创建HTML对象脚本代码
2008/11/24 Javascript
如何使Chrome控制台支持多行js模式——意外发现
2013/06/13 Javascript
复制js对象方法(详解)
2013/07/08 Javascript
JavaScript自定义日期格式化函数详细解析
2014/01/14 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
2014/11/10 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
JS获取年月日时分秒的方法分析
2016/11/28 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
2017/03/28 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
2017/06/01 Javascript
JS实现简单表格排序操作示例
2017/10/07 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
2017/10/23 Javascript
vue微信分享到朋友圈 vue微信发送给好友
2018/11/28 Javascript
layui-table对返回的数据进行转变显示的实例
2019/09/04 Javascript
vue设置导航栏、侧边栏为公共页面的例子
2019/11/01 Javascript
Python程序语言快速上手教程
2012/07/18 Python
python使用os.listdir和os.walk获得文件的路径的方法
2017/12/16 Python
Python 通过打码平台实现验证码的实现
2019/05/13 Python
python实现的发邮件功能示例
2019/09/11 Python
python3中利用filter函数输出小于某个数的所有回文数实例
2019/11/24 Python
使用pytorch实现可视化中间层的结果
2019/12/30 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
python安装第三方库如xlrd的方法
2020/10/31 Python
什么是命名空间(NameSpace)
2015/11/24 面试题
平面设计求职信
2014/03/10 职场文书
个人安全生产责任书
2014/07/28 职场文书
优秀大专毕业生求职信
2014/08/04 职场文书
八项规定自查自纠报告及整改措施
2014/10/26 职场文书
四年级小学生评语
2014/12/26 职场文书
2015年教师业务工作总结
2015/05/26 职场文书
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL
Windows Server 2016服务器用户管理及远程授权图文教程
2022/08/14 Servers