【javascript知识进阶】对象

一.对象简述

JavaScript 中所有变量都可以当作对象（拥有属性和方法）使用，除了两个例外 null 和 undefined。

数字的字面值也可以当作对象使用。

JavaScript 解析器的一个错误很容易弄混， 它试图将点操作符解析为浮点数字面值的一部分。

2.toString(); // 出错：SyntaxError

有很多变通方法可以让数字的字面值看起来像对象。

2..toString(); // 第二个点号可以正常解析2 .toString(); // 注意点号前面的空格(2).toString(); // 2先被计算

二.原型

2.1 基于类的对象

1.定义类

2.实例类的构造函数

3.实例化对象

2.2 基于原型的对象

原型法的主要思想是，现在有1个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展。我们称B的原型为A。

1.定义原型对象

2.定义对象的构造函数

3.将构造的函数关联到原型

4.实例化对象

var proto = {    sentence : 4,    probation : 2};var Prisoner = function(name,id){    this.name = name;    this.id = id;};Prisoner.prototype  = proto;var first = new Prisoner('joe',12);var second = new Prisoner('sam',20);alert(first.a);alert(first.name);alert(second.probation);alert(second.id);

2.3.prototype

2.3.1 js中的“类”

js的语法本身是不涉及“类”这个概念的，但是我们可以手动实现“类”的效果。

function People(name){  this.name=name;  this.Introduce=function(){    alert("My name is "+this.name);  }}People.Run=function(){  alert("I can run");}People.prototype.IntroduceChinese=function(){  alert("我的名字是"+this.name);}

以上代码中People就可以看成一个“类”，在调用这些方法时需要如下调用：

var p1=new People("Windking");p1.Introduce();People.Run();p1.IntroduceChinese(); 

Introduce可以看成是一个普通的”对象方法”

Run可以看成一个“静态方法”

IntroduceChinese可以看成一个“原型方法”

实际上javascript中所有的方法就分为这三类。

        var obj = {            a:1,            b:2        }        var fun = function (a,b) {            this.a = a;            this.b = b;        }        obj2 = new fun(1,2);

如果把fun看成一个“类”，obj2实际上和obj是等价的，所以javascript普通对象实际上可以看作已经实例化出的对象。

通过prototype我们可以实现类的继承，具体我们会在下面讲解。

2.3.2 prototype基本用法

javascript中的每个函数对象(可以看作是类)都有prototype属性，对prototype属性的解释是返回对象类型原型的引用

A.prototype = new B();

A的prototype为B的一个实例，可以理解A将B中的方法和属性全部克隆了一遍。A能使用B的方法和属性。这里强调的是克隆而不是继承。但是执行代码后A能使用B的属性了方法了，实际上也是实现了继承。

就比如上面的实例：我们首先定义了proto对象，然后又定义了Prisoner对象，我们打算以proto为原型来克隆的Prisoner类同时也包含了proto的属性。

我们也可以把Prisoner看成proto的构造方法。

三.属性

3.1对象属性查找原理

看下面的实例

function baseClass(){    this.showMsg = function()    {        alert("baseClass::showMsg");       }}function extendClass(){    this.showMsg =function ()    {        alert("extendClass::showMsg");    }}extendClass.prototype = new baseClass();var instance = new extendClass();instance.showMsg();//显示extendClass::showMsg

extendClass本身的方法和它原型对象中的方法同名？

从这个实例就可以看出：js对象在使用某个属性或方法时，会首先从自身的属性或方法中查找，找不到的话再去prototype（原型对象）中查找，然后再去原型对象的prototype中查找，直到到达顶部也就是 Object.prototype - 但是仍然没有找到指定的属性，就会返回 undefined。

这也就说我们常说的原型链。

在原型链中的每个层级中我们就能看到“类继承”的影子了。

3.2对象属性删除

删除属性的唯一方法是使用 delete 操作符；

设置属性为 undefined 或者 null 并不能真正的删除属性， 而仅仅是移除了属性和值的关联。

var obj = {    bar: 1,    foo: 2,    baz: 3};obj.bar = undefined;obj.foo = null;delete obj.baz;for(var i in obj) {    if (obj.hasOwnProperty(i)) {        console.log(i, '' + obj[i]);    }}

四.继承

function Foo() {    this.value = 42;}Foo.prototype = {    method: function() {}};function Bar() {}// 设置Bar的prototype属性为Foo的实例对象Bar.prototype = new Foo();Bar.prototype.foo = 'Hello World';// 修正Bar.prototype.constructor为Bar本身Bar.prototype.constructor = Bar;var test = new Bar() // 创建Bar的一个新实例// 原型链test [Bar的实例]    Bar.prototype [Foo的实例]         { foo: 'Hello World' }        Foo.prototype            {method: ...};            Object.prototype                {toString: ... /* etc. */};

上面的例子中，test 对象从 Bar.prototype 和 Foo.prototype 继承下来；因此， 它能访问 Foo 的原型方法 method。同时，它也能够访问那个定义在原型上的 Foo 实例属性 value。 需要注意的是 new Bar() 不会创造出一个新的 Foo 实例，而是 重复使用它原型上的那个实例；因此，所有的 Bar 实例都会共享相同的 value 属性。

五.hasOwnProperty方法

hasOwnProperty 函数可以过滤到原型链上的属性，从而获取到自身对象上的属性

// 修改Object.prototypeObject.prototype.bar = 1; var foo = {goo: undefined};foo.bar; // 1'bar' in foo; // truefoo.hasOwnProperty('bar'); // falsefoo.hasOwnProperty('goo'); // true

在我们使用for in遍历对象时推荐这样使用：

for(var i in foo) {    if (foo.hasOwnProperty(i)) {        console.log(i);    }}

一个广泛使用的类库 Prototype 就扩展了原生的 JavaScript 对象。 因此，当这个类库被包含在页面中时，不使用 hasOwnProperty 过滤的 for in 循环难免会出问题。