JavaScript面向对象编程(3)prototype简介

页面导航:首页 > 网络编程 > JavaScript > JavaScript面向对象编程(3)prototype简介

JavaScript面向对象编程(3)prototype简介

来源: 作者: 时间:2016-02-05 11:06 【

prototype原型,用于给对象动态地新增属性和行为先定义个构造函数 小配件function Gadget(name, color) {this name = name;this color = color;this whatAreYou = function(){return 39

prototype——原型,用于给对象动态地新增属性和行为

先定义个构造函数

//小配件
function Gadget(name, color) {
	this.name = name;
	this.color = color;
	this.whatAreYou = function(){
		return '我是 ' + this.color + '的' + this.name;
	}
	this.get = function(what){
		return this[what];//对象与数组有类似之处,js的[]中可以是下标,也可以是对象的属性
	}
}

使用prototype增加属性和方法

/*使用prototype增加属性和方法*/
Gadget.prototype.price = 100;//增加属性
Gadget.prototype.rating = 3;
//增加行为==方法==或者叫函数
Gadget.prototype.getInfo = function() {
	return '等级: ' + this.rating + ', 价格: ' + this.price;
};

/*也可批量替换或新增*/
Gadget.prototype = {
	price:100,
	rating:3,
	getInfo:function() {
		//可访问原始属性
		return '名字:'+this.name+',等级: ' + this.rating + ', 价格: ' + this.price;
	}
};

var toy = new Gadget('网络摄像头','黑色');
alert(toy.getInfo());//可访问新的方法,也可访问原有的属性和方法


/*属性的遍历及判断*/

for(i in toy){


	if(typeof(toy[i])!="function")
		//遍历出toy上可以访问的所有的属性及属性值
		alert(i + '=' + toy[i]);
}
//判断属性是不是原始的
for(prop in toy){
	if (toy.hasOwnProperty(prop)) {
		alert("原始:"+prop + '=' + toy[prop]);
	}
}


每个对象都有isPrototypeOf方法,用于判断当前对象是不是另外一个对象的prototype

/*Every object also gets the isPrototypeOf() method. 
 * This method tells you whether that specific object is used as a prototype of another object.
每个对象都有isPrototypeOf方法,用于判断当前对象是不是另外一个对象的prototype
* */
var monkey = {
	hair: true,
	feeds: 'bananas',
	breathes: 'air'
};

function Human(name) {
	this.name = name;
}

Human.prototype = monkey;
var george = new Human('George');

alert("monkey.isPrototypeOf(george)==="+ monkey.isPrototypeOf(george));

总结:
可以将prototype看做是一个额外的对象,在构造器上引用一个prototype对象,这个对象拥有一些属性和方法;

通过构造函数产生的对象也自然链接了这个prototype对象,而且可以把prototype对象的属性和方法当做自己的;

当然,原始的属性和通过prototype获得的属性还是有些不一样,至少通过hasOwnProperty可以判断出这个属性是不是自己的原生属性;

另外,可以通过a.isPrototypeOf(b)来判断a是不是b的prototype。

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<