javascript --- 原型初探七日谈（一）

在javascript中，像原型，闭包这样的概念，只要我们能领悟其中的原理，一切都会显得格外清晰与明了。

原型属性（prototype）:

下面我们简单定义一个函数

function her(a, b){return a + b;
}

在这些函数一定义就被赋予的属性中，就包括prototype属性，她的初始化是一个空对象：

typeof her.prototype  // Object

当然我们也可以自己添加该属性：

her.prototype = {};

而且我们可以赋予这个空对象一些属性和方法，这并不会对foo函数产生神马影响，以为只有her()函数被当做构造函数来使用的情况下，这些属性才起作用。

来个例子：

function her(){this.name = 'Anna',this.child = 'Jok',this.say = function(){return 'My name is' + this.name + 'My child is' + this.child;}
}

上面是一个简单的构造函数，我们就用构造器属性prototype属性来增加她的属性和方法，您可以这样：

her.prototype.sex = 'women';
her.prototype.height = '175cm';
her.prototype.doing = function(){return 'I is a' + this.sex + 'I am height is' + this.height;
}

使用原型的属性和方法：

var she = new her();
she.name;  // Anna
she.child; // Jok

如上所讲如果想用以上的属性和方法，那必须new一个上述构造函数her()的一个对象实例。

对于原型来说，最重要的一点就是理解她的‘实时性’，由于在javascript中几乎所有对象都是通过引用的方式传递的。因此我们创建出来的新对象并没有属于自己的原型副本。这也就意味着我们可以随时修改prototype的属性和方法，并且由同一构造函数创建出来所有对象的prototype都会同时改变。 (甚至还会影响到修改之前就已经创建好的对象)。

继续之前的例子：

her.prototype.eat = 'water';
she.eat; // water

哪怕she之前就被创建了，我仍然还会在这个对象中访问到eat属性。

自身属性与原型属性

上述的创建doing()方法那个示例，其实直接引用一次her.prototype也可以完成上述工作：

function her(){this.name = 'Anna',this.child = 'Jok',this.say = function(){return 'My name is' + this.name + 'My child is' + this.child;},this.sex = 'women',this.eat = 'water'
}

her.prototype.doing = function(){return 'I is a' + her.prototype.sex + 'I am height is' + her.prototype.height;
}

这样有神马不同吗？要想知道这个问题就必须深入了解原型的工作原理。

var she = new her();

当我们访问she对象的某个属性时，例如she.name时，javascript引擎会遍历该对象的所有属性，并查找出name属性，如果找到了就会直接返回，否则为undefined.

这回我们访问she.sex会发生神马呢，javascript引擎依旧会查询she的所有属性，但是这回找不到一个叫sex的属性了，接下来javascript引擎就会去查找用于创建该对象的构造函数的原型（等价于我们直接访问到she.constructor.prototype）,如果在原型中找到了该属性，就立刻使用该属性。

这种方式与直接访问原型属性是一样的。每个对象都有属于自己的构造器属性，这个属性引用的就是创建该对象的构造函数，所以：

she.constructor === her; // true
she.constructor.prototype.sex; // women

现在，我们回顾一下整个过程。我们知道每个对象都有一个构造器，而原型本身也是一个对象，必然也会有自己的构造器，而这个构造器又会有自己的原型。于是这种结构会一直持续下去，并取决于原型链的长度。她们的最后一环必然是Object()内建对象，她是最高级的父及对象（始祖）。

she.toString();  // Object

利用自身属性重写原型属性

通过上述我们知道一个对象自身属性中没有找到指定的属性，前提是这个属性存在，那么她就会顺着原型链去找。但是遇到对象的自身的属性和原型属性重名怎么办呢？

答案是自身属性的优先级要高于原型属性（自己的利益至上）。

来个梨子：

function her(){this.name = 'Anna';
}
var she = new her();
she.name = 'Lous';
she.name;  // Lous

我们可以通过hasOwnProperty()方法来判断一个属性是自身属性还是来自于原型属性。

she.hasOwnProperty('name'); // true

如果这时候我们把自身属性删掉，那么同名的原型属性又会浮出水面：

delete she.name;  //trueshe.name // Annashe.hasOwnProtype('name') // false

当然我们可以重建这个属性：

she.name = 'Lous';
she.name; // Lous;
she.hasOwnProtype('name'); // true

如何判断一个属性到底是原型链中那个原型的属性呢？答案还是用hasOwnProperty()属性。例如我们想知道toString()这个方法来自与哪里：

she.hasOwnProperty('toString');  // false
she.constructor.hasOwnProperty('toString');  // false
she.constructor.prototype.hasOwnProperty('toString');  // false
Object.hasOwnProperty('toString');  // false
Object.prototype.hasOwnProperty('toString');  // true

呵呵(*Φ皿Φ*)！！

对象的枚举属性

如果想要获得一个对象的所有属性的列表，那么就用for-in循环吧！（for循环适合数组，for-in循环更适合对象），来个栗子：

var params = {name : 'Anna',sex : 'women'
}var url = 'http://www.baidu.com?',i,query = [];
for(i in params){query.push(i + '=' + params[i]);
}
url += query.join('&');  // 'http://www.baidu.com?name=Anna&sex:women';

在这里有几个细节需要注意：

　　1. 不适所有的对象属性都是可以枚举的，例如length,constructor等就不会被显示，那些会显示的属性被称为可枚举的，我们可以通过各个对象所提供的propertyIsEnumerable()方法来判断对象的某个属性是不是可枚举的。

　　2. 原型链中的各个属性也会被显示出来，当然她们是被可枚举的。

来个栗子：

function her(){this.name = 'Anna';this.sex = 'women';this.say = function(){'My name is' + this.name;}
}
var she = new her();
she.eat = 'water';for(var i in she){console.log(i + '=' + she[i]);
}name = 'Anna'
sex = 'women'
say = function(){'My name is' + this.name;}
eat = 'water'

我们再来一次，这次输出自身属性

for(var i in she){if(she.hasOwnProperty(i)){console.log(i +'='+she[i]);}
}name = 'Anna'
sex = 'women'
say = function(){'My name is' + this.name}

未完待续。。。。。。

转载于:https://www.cnblogs.com/beyond-succeed/p/5819328.html