1 对象相关的一些语言特性

1.1 一切皆为对象
JavaScript里所有的东西都是对象. 对象是属性的集合. 数字, 字符串, 布尔值等原始值是"伪对象", 它们同样拥有属性, 但是是在栈上分配并按值传递. 而其他的对象是堆上分配并按引用传递.
一个很重要的概念是, 函数也是对象, 能够作为变量的值, 返回值, 参数或者属性的值. 函数对象特殊的地方是能通过"xxx()"语法执行包含在xxx函数对象内的代码. 因为这一特殊性, typeof xxx 将会返回function, 但这只是一种便利设施.

1.2 对象的属性可以动态添加和删除

var foo = new Object();
// 为foo对象添加bar属性
foo.bar = "foobar";
alert(foo.bar); //foobar
// 删除foo对象的bar属性
delete foo.bar;
alert(foo.bar); //undefined

1.3 除了宿主对象, 其它对象皆由构造函数创建
要有对象, 就先要有创建对象的方法. 
在C++/Java等语言, 这个方法就是实例化XXX类的一个实例xxx.
而在JavaScript的世界里实际没有类的东西, 当然仍然可以用"类"和"实例"等惯用语来描述JavaScript中类似的行为, 但其机制是完全不同的. JavaScript的对象是由构造函数创建的, 每个对象都有constructor属性表示创建该对象的构造函数:

function Test() { this.a = "hello"; }
var test = new Test(); // 由Test构造函数创建
alert(test.constructor);

var o = { a: "hello" };
//实际相当于
var o_ = new Object();
o_.a = "hello"; // 由Object构造函数创建
alert(o.constructor);

构造函数也是对象, 那构造函数是由什么创建? 内建的Function函数:

function Test(a, b)
{
    alert(a+b);
}
// 相当于:
Test = new Function(["a", "b"], "alert(a+b);");

Function函数又是由什么创建? 实际上Function是本机代码实现的固有对象. 不过为了一致性, Function也有constructor属性, 该属性指向它自己. 接上面的代码:

/* 输出 function Function(){
            [native code]
        }
*/
alert(Test.constructor);

alert(Test.constructor.constructor === Test.constructor); // true
alert(Test.constructor === Object.constructor); // true

2 原型prototype
2.1 prototype的概念
prototype是构造函数的一个属性, 该属性指向一个对象. 而这个对象将作为该构造函数所创建的所有实例的基引用(base reference), 可以把对象的基引用想像成一个自动创建的隐藏属性. 当访问对象的一个属性时, 首先查找对象本身, 找到则返回; 若不, 则查找基引用指向的对象的属性(如果还找不到实际上还会沿着原型链向上查找,  直至到根). 只要没有被覆盖的话, 对象原型的属性就能在所有的实例中找到.
原型默认为Object的新实例, 由于仍是对象, 故可以给该对象添加新的属性:

// prototype默认为new Object(); 为了方便, 记为p_obj
function Person(name) {
    this.name = name;
}

// 为 p_obj 增加 sayName 属性
Person.prototype.sayName = function(){
    alert(this.name);
}

var john = new Person("John"); // john 的 base reference指向p_obj
var eric = new Person("Eric");  // eric 的 base reference也是指向p_obj

// 注意sayName代码中的this将指向实例化后的对象(this绑定)
john.sayName(); // john对象本身没有sayName属性, 于是访问原型对象p_obj的sayName属性
eric.sayName(); // 访问同一个原型对象p_obj的sayName属性

var tmp = Person.prototype;
tmp.boss = "David";
// 于这个运行点, p_obj已经被修改
// 根据上述属性访问流程, 新的修改(boss属性)能反映到所有的实例, 包括已经创建和即将创建的
alert("John's boss is " + john.boss);
alert("Eric's boss is " + eric.boss);

// hisCar和sayCar属性将增加到john对象而不是p_obj对象..
john.hisCar = "Audi";
john.sayCar = function(){
    alert(this.name + " has a car of " + this.hisCar);
}
john.sayCar();
// ..因此下一句将错误, 因为eric对象本身和原型p_obj都没有sayName属性
/* eric.sayCar(); */

2.2 原型链
除了能修改prototype指向的对象, 还能修改prototype指向哪一个对象, 即为prototype赋予一个不同的对象. 这可以实现一种简单的继承:

function Superman() {}
Superman.prototype.sayHello = function(){
    alert("I'm a superman.");
}

function SupermanCan(skill){
    this.skill = skill;
}
// 为prototype赋予Superman的实例..
SupermanCan.prototype = new Superman();
// ..再动态添加新的属性
SupermanCan.prototype.sayMore = function(){
    this.sayHello(); // 调用"父类"的方法
    alert("I can " + this.skill);
}

var david = new SupermanCan("fly");
// output: I'm a superman. I can fly
david.sayMore();

如果先实例化出一个对象, 再为构造函数prototype赋予一个不同的对象, 将会: 已经创建的对象的基引用不变, 将来创建的对象的基引用为新的原型对象:

var f1 = {echo: function() { alert("sound"); } };
function Foo() {};
var foo = new Foo(); // foo的基引用指向Object实例
Foo.prototype = f1;
/* 未定义, 因为这是"foo对象自己或者基引用指向的对象有echo属性吗?"
   而不是"foo对象自己或者Foo.prototype指向的对象有echo属性吗?" */
alert(foo.echo);

var foo2 = new Foo(); // foo2的基引用指f1对象
foo2.echo(); // output: sound

所有的构造函数的prototype都不能为空, 就是说Superman.prototype = null 会被解释引擎无视;  另一方面, Object构造函数也有prototype属性(该属性是只读的, 可以为原型增加属性,但不能赋予不同的对象), 故因此可以有多层的原型链, 但原型链的根必定会是Object.prototype . 这意味着给Object.prototype增加属性影响到所有对象:

Object.prototype.echo = function() {
    alert("hello");
}

// echo属性将增加到所有对象固有对象和自定义对象

var arr = new Array();
arr.echo();
Array.echo();

function ObjCons()    {
    this.dummy = "d";
}
var obj = new ObjCons();
obj.echo();
ObjCons.echo();

3. 构造函数和new的实质
构造函数是一个地地道道的函数, 一个函数之所以能成为构造函数, 是因为new运算符:

this.msg = "window";

function Test()
{
    alert(this.msg);
}

Test(); // window
var test = new Test(); // undefined. 因为test对象没有定义msg属性

二者区别在于如何切入对象: Test() 在某个对象(例子中为window)的上下文上执行代码, 即this指向这个对象; new Test()创建一个新对象, 并以这个新的对象为上下文(this指向新对象)执行代码, 然后返回这个新对象. 
假如有个函数:

function Test() {
    var dummy = "have money";
    this.wish = dummy;
    doSomeThing();
    
}

结合以上的所有论述, 可以推测new Test()行为的伪代码表示为:
      创建一个新对象temp;
      temp.constructor = Test;
      temp.(base reference) = Test.prototype; // 这一句先于代码体执行, 意味着构造函数里的this.xxx能访问原型对象的属性xxx
      bind: this = temp; // 将this绑定到temp对象
      // 开始执行函数代码
      var dummy = "have money";
      this.wish = dummy; // 为temp对象添加wish属性
      doSomeThing();
      ....
      // 结束执行函数代码
      return temp;
这个未必会符合内部的二进制实现, 但却能很好地解释了JavaScript的特性.

JavaScript中的原型和对象机制相关推荐

  1. JavaScript中的原型(prototype)与继承

    在JavaScript中,原型是用来模仿其他「类」语言继承机制的基础.原型并不复杂,原型只是一个对象. 一.原型对象 1.1 什么是原型对象 每当我们创建了一个函数后,这个函数就拥有了一个protot ...

  2. JavaScript中的原型和继承

    请在此暂时忘记之前学到的面向对象的一切知识.这里只需要考虑赛车的情况.是的,就是赛车. 最近我正在观看 24 Hours of Le Mans ,这是法国流行的一项赛事.最快的车被称为 Le Mans ...

  3. 理解JavaScript中的原型与原型链

    理解JavaScript中的原型与原型链 原型链是一种机制,指的是JavaScript中每个内置的对象都有一个内置的__proto__属性指向创建它的构造函数的prototype(原型)属性.原型链的 ...

  4. 在JavaScript中使用“原型”还是“ this”?

    之间有什么区别 var A = function () {this.x = function () {//do something}; }; 和 var A = function () { }; A. ...

  5. 理解JavaScript中的原型继承(2)

    两年前在我学习JavaScript的时候我就写过两篇关于原型继承的博客: 理解JavaScript中原型继承 JavaScript中的原型继承 这两篇博客讲的都是原型的使用,其中一篇还有我学习时的错误 ...

  6. 理解原型设计模式以及JavaScript中的原型规则

    原型规则 原型规则 所有的引用类型(数组.对象.函数),都具有对象特征,即可自由扩展属性: var arr = []; arr.a =1; 所有的引用类型都有对象的特性,即可自由扩展 所有的引用类型都 ...

  7. JavaScript中的函数是对象?

    函数是第一类对象(first-class object),被称为一等公民.函数与对象共存,我们也可以认为函数就是其他任意类的对象. 那么今天,就让我们一起简单聊一聊JavaScript的函数吧! 目录 ...

  8. JavaScript中的类方法、对象方法、原型方法

    类方法:也叫函数方法,在JavaScript中函数也是一个对象,所以可以为函数添加属性以及方法: 对象方法:包括构造函数中的方法以及其原型上面的方法: 原型方法:一般用于对象实例共享,在原型上面添加该 ...

  9. js实现html模板继承,理解JavaScript中的原型和继承

    本文主要讲了原型如何在JavaScript中工作,以及如何通过[Prototype]所有对象共享的隐藏属性链接对象属性和方法:以及如何创建自定义构造函数以及原型继承如何工作以传递属性和方法值. 介绍 ...

最新文章

  1. oracle 表分区[三]
  2. Dart 流中的 listen 和 forEach 有什么区别?
  3. 143. Reorder List 重排链表
  4. windows下dubbo-admin和zookeeper安装部署
  5. oracle分组后合并(wm_concat)其中一个字段
  6. 微PE工具箱四合一下载并安装
  7. python 自动化测试面试题及答案_自动化测试面试题及答案
  8. C#局域网聊天软件 适合公司内部聊天 类qq旺旺 可实时监控桌面 商用
  9. Unity3d Network 局域网多人对战之游戏大厅
  10. 解析纯真ip数据库php源码, 纯真数据库IP地理位置查询类
  11. wince驱动加载失败
  12. 四川中小学计算机能力提升,四川省中小学教师信息技术应用能力提升工程2.0
  13. 粒子群优化算法实现寻找函数最值
  14. 一键拼接微信好友头像/玩炫朋友圈
  15. 一个屌丝程序猿的人生(三十八)
  16. 手机拍照打卡活动制作方案,通过拍照不聚集活动,函数参数(Function parameters)是在函数定义中所列的名称。
  17. C++ 标准容器库小结
  18. 如何创建phpinfo查看php信息?
  19. 关于Docker Toolbox安装的一点经验(算是吧)
  20. 01组团队项目-中期总结

热门文章

  1. uva 12627——Erratic Expansion
  2. 邮箱验证 ——ACM
  3. linux下隐藏输入密码
  4. word2003如何设置护眼模式_ERP系统上线,如何设置采购收货的模式,提升企业的采购效率...
  5. LeetCode【3--无重复的最长字串】 LeetCode【4--有序数组中的中位数】
  6. leetcode(一)刷题两数之和
  7. linux 磁盘管理3板斧,Linux磁盘管理三板斧的使用心得
  8. centos php安装redis扩展,Centos7编译安装redis、php安装phpredis扩展
  9. QBXT Day 5图论相关
  10. 父、子页面之间页面元素的获取,方法的调用