一:原型属性
函数本身也是一个包含了方法和属性的对象。
定义一个函数foo(),访问其他对象一样访问该函数的属性:
function foo(a, b) {
return a * b;
}
foo.length
--2
foo.constructor
ƒ Function() { [native code] }
函数定义时被创建的属性就包括有prototype属性,他的初始值是一个“空”对象
typeof foo.prototype
"object"
可以自己添加该属性
foo.prototype={};
1.利用原型添加方法和属性
构建一个具体的构造函数Gadget(),在新建时为其添加属性和方法。
function Gadget(name, color) {
this.name = name;
this.color = color;
this.whatAreYou = function () {
return 'I am a ' + this.color + '' + this.name;
};
}
通过构造器函数的prototype属性来增加该构造器所能提供的功能
Gadget.prototype.price = 100;
Gadget.prototype.rating = 3;
Gadget.prototype.getInfo = function () {
return 'Rating:' + this.rating + ',price: ' + this.price;
}
也可以另外定义一个对象,将其覆盖到之前的原型上:
Gadget.prototype = {
price: 100,
rating:
}
2.使用原型的方法和属性:
直接用该构造器来新建对象,就可以访问之前定义的那些属性和方法。
var newtoy=new Gadget('webcam','black');
newtoy.name;
"webcam"
newtoy.color;
"black"
newtoy.whatAreYou();
"I am a blackwebcam"
newtoy.price;
100
newtoy.rating;
3
newtoy.getInfo();
"Rating:3,price: 100"
可以随时修改prototype属性,并且由同一构造器创建的所有对象的prototype属性也同时改变。
向原型中添加一个新方法:
Gadget.prototype.get = function (what) {
return this[what];
};
newtoy对象在get()方法定义之前就已经被创建,我们依然可以在该对象中访问新增的方法:
newtoy.get('color');
"black"
newtoy.get('price');
100
3.自身属性与原型属性
在getInfo()的示例中,我们使用this指针来完成对象的访问,但其实直接引用Gadget.prototype也可以完成同样的操作:
Gadget.prototype.getInfo = function () {
return 'Rating: ' + Gadget.prototype.rating +
',price: ' + Gadget.prototype.price;
};
回到之前的那个newtoy对象上:
var newtoy = new Gadget('webcam', 'black');
newtoy.name
"webcam"
newtoy.rating
3
每个对象都有属于自己的构造器属性,所引用的就是用于创建该对象的那个函数
newtoy.constructor===Gadget
true
newtoy.constructor.prototype.rating;
3
每个对象都会有一个构造器,而原型本身也是一个对象,这意味着它也必然有一个构造器,而这个构造器又会有自己的原型,这种结构可能会一直不断的持续下去,并最终取决于原型链的长度,但最后一环肯定是Object内建对象,它是最高级的父级对象。
4.利用自身属性重写原型属性
如果一个对象自身属性中没有找到指定的属性,就会使用原型链中查找到的相关属性,如果,对象的自身属性与原型属性同名,自身属性的优先级高于原型属性。
示例:同一个属性名同时出现在对象的自身属性和原型属性中:
function Gadget(name) {
this.name = name;
}
Gadget.prototype.name = 'sunyajing';
新建一个对象,并访问该对象自身的name属性
var toy = new Gadget('camera');
toy.name;
"camera"
通过hasOwnProperty()判断一个属性是自身属性还是原型属性
toy.hasOwnProperty('name');
true
删除这个属性,同名的原型属性就会“浮出水面”
delete toy.name;
true
toy.name;
"sunyajing"
toy.hasOwnProperty('name');
false
我们随时可以重建这个对象的自身属性:
toy.name = 'camera';
toy.name;
"camera"
判读一个对象的某个原型属性到底是原型链中哪个原型的属性呢?可以用hasOwnProperty()属性:
toy.toString();
"[object Object]"
toy.hasOwnProperty('toString');
false
toy.constructor.hasOwnProperty('toString');
false
toy.constructor.prototype.hasOwnProperty('toString');
false
Object.hasOwnProperty('toString');
false
Object.prototype.hasOwnProperty('toString');
true
for 更适合数组,for-in更适合对象,构造URL字符串为例:
var params = {
productid: 666,
section: 'products'
};
var url = 'http://example.org/page.php',
i,
query = [];
for (i in params) {
query.push(i + '=' + params[i]);
}
url += query.join('&');
"http://example.org/page.phpproductid=666§ion=products"
并不是所有的属性都会在for-in循环中显示,例如(数组的)length属性和constructor属性就不会被显示
1.会显示的属性被称为可枚举的,可以通过propertyIsEnumerable()方法来判断对象的某个属性是否可枚举。
2.原型链中的各个原型属性也会被显示出来,当然前提是可枚举的,可以通过对象的hasOwnProperty()方法来判断一个属性是对象自身属性还是原型属性。
3.对于所有的原型属性propertyIsEnumerable()都会返回false,包括那些在for-in循环中可枚举的属性
通过以下代码看一下具体的实现方法:
function Gadget(name, color) {
this.name = name;
this.color = color;
this.getName = function () {
return this.name;
};
}
Gadget.prototype.price = 100;
Gadget.prototype.rathing = 3;
对他执行for-in循环,就会列出该对象中的所有属性,包括原型中的属性:
for (var prop in newtoy) {
console.log(prop + ' = ' + newtoy[prop]);
}
结果:
name = webcam
color = black
getName = function () {
return this.name;
}
price = 100
rathing = 3
如果要对对象属性和原型属性做一个区分,就要调用hasOwnProperty()方法:
newtoy.hasOwnProperty('name');
true
newtoy.hasOwnProperty('price');
false
显示对象的自身属性:
for (var prop in newtoy) {
if (newtoy.hasOwnProperty(prop)) {
console.log(prop + ' = ' + newtoy[prop]);
}
}
结果:
name = webcam
color = black
getName = function () {
return this.name;
}
propertyIsEnumerable()会对所有的非内建对象属性返回true
newtoy.propertyIsEnumerable('name');
true
对于内建属性和方法大部分是不可枚举的
newtoy.propertyIsEnumerable('constructor');
false
如果propertyIsEnumerable()的调用是来自原型链上的某个对象,那么该对象中的属性是可枚举的
newtoy.constructor.prototype.propertyIsEnumerable('price');
true
5.isPrototypeOf()方法
每个对象中都会有一个isPrototypeOf()方法,这个方法告诉我们当前对象是否是另一个对象的原型
var monkey = {
hair: true,
feeds: 'bananas',
breathes: 'air'
};
创建一个Human的构造器函数,并设置原型属性指向monkey:
Human.prototype = monkey;
Human.prototype = monkey;
var george = new Human('George');
monkey.isPrototypeOf(george);
不知道某个原型的情况下,获得对象的原型。
Object.getPrototypeOf(george).feeds;
Object.getPrototypeOf(george) === monkey;
6.神秘的_proto_链接
改写用monkey对象做原型的Human()对象构造器。
var monkey = {
feeds: 'bananas',
breathes: 'air'
};
function Human() { }
Human.prototype = monkey;
创建一个developer对象,并赋予它一些属性:
var developer = new Human();
developer.feeds = 'pizza';
developer.hacks = 'JavaScript';
访问:
developer.hacks;
-- "JavaScript"
developer.feeds;
-- "pizza"
但是breathes在developer对象自身的属性中是不存在的,所以就得去原型中查找
developer.breathes;
"air"
这个神秘的链接叫做__proto__属性
developer.__proto__ === monkey;
true
__proto__是某个实例对象的属性,而prototype则是属于构造器函数的属性。
typeof developer.__proto__
"object"
typeof developer.prototype;
"undefined"
typeof developer.constructor.prototype;
"object"
二:扩展内建对象
内建对象的构造器函数(Array、String、Object、Function)都是可以通过原型来扩展的
Array.prototype.inArray = function (needle) {
for (var i = 0, len = this.length; i < len; i++) {
if (this[i] === needle) {
return true;
}
}
return false;
};
var colors = ['red', 'green', 'blue'];
colors.inArray('red');
true
colors.inArray('yellow');
false
反转字符串的功能:
String.prototype.reverse = function () {
return Array.prototype.reverse.apply(this.split('')).join('');
}
"sunyujing".reverse();
"gnijuynus"
为String对象添加trim()方法
if(typeof String.prototype.trim !== 'function'){
String.prototype.trim = function(){
return this.replace(/^\s+|\s+&/g,'');
};
}
" hwllow ".trim();
"hwllow"
如果想要通过原型为某个对象添加一个新属性,务必检查一下该属性是否已经存在
三:原型陷阱
处理原型时,特别注意以下两种行为:
1.我们对原型对象执行完全替换时,可能会触发原型链中某种异常(exception)
2.prototype.constructor属性不可靠
新建一个简答的构造器函数,并创建两个对象
function Dog() {
this.tail = true;
}
var benji = new Dog();
var rusty = new Dog();
添加一个Say()方法:
Dog.prototype.say = function () {
return 'Woof';
};
上面的两个对象都可以访问该新方法。
benji.say();
"Woof"
rusty.say();
"Woof"
检查一下这些对象构造器函数,会发现一切正常。
benji.constructor === Dog;
--true
rusty.constructor === Dog;
--true
用一个自定义的新对象完全覆盖掉原有的原型对象:
Dog.prototype = {
paws: 4,
hair: true
};
这会使原有对象不能访问原型的新增属性,依然通过那个神秘的链接与原有的原型对象保持联系。
typeof benji.paws;
--"undefined"
benji.say();
--"Woof"
typeof benji.__proto__.say;
--"function"
typeof benji.__proto__paws;
--"undefined"
之后创建的所有对象使用的都是被更新后的prototype对象
var lucy = new Dog();
lucy.say();
Uncaught TypeError: lucy.say is not a function
lucy.paws;
--4
其神秘的链接__proto__也指向了新的prototype对象
typeof lucy.__proto__.paws;
---"number"
typeof lucy.__proto__.say;
---"undefined"
新对象的constructor属性就不能再保持正确了,原本是Dog()的引用却指向了Object()
lucy.constructor;
--ƒ Object() { [native code] }
benji.constructor;
--ƒ Dog() {
this.tail = true;
}
也可以通过重新设置constructor属性来解决上述所有的异常行为:
function Dog() { }
Dog.prototype = {};
new dog().constructor === Dog;
--false
Dog.prototype.constructor = Dog;
new Dog().constructor === Dog;
true
当我们重写某个对象的prototype时,需要重新设置相应的constructor属性。