`
pouyang
  • 浏览: 314996 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JS prototype例子原型与继承

阅读更多
prototype 属性
返回对象类型原型的引用。

         用 prototype 属性提供对象的类的一组基本功能。 对象的新实例“继承”赋予该对象原型的操作,注意是对象新实例JavaScript的每个函数都有一个prototype属性,函数原型里面一般放公共的属性

直接上例子:
<script>
Array.prototype.max = function(){
	alert("算法由你来写!");
};
var arr = new Array(1, 2, 3, 4, 5, 6);
var max = arr.max();


function oo () {
	alert("oo");
}

oo.prototype.addMethodsOne = function() {
	alert("addMethodsOne!!!");
}
new oo().addMethodsOne();


var a = function() {};
a.prototype.bbb = function() {
	alert("var a = function(){}这样也可以!");
}
new a().bbb();

var b = {}; //这种写法是错误的哦!
b.prototype.ccc = function(){ //这种写法是错误的哦!
	alert("cccc");
}
new b().ccc();//这种写法是错误的哦!


/*************************************************/
function test2() {
	var bb = "1";
	this.cc = "2";
	this.d = function() {alert("dddd");};
 }
 test2.prototype.aaa = function () {
	alert(this.bb);  //undefined
	alert(this.cc);  //2
	alert(this.d()); // ddd
 }
new test2().aaa();
注意原型函数的变量用this来指定,那么在新的实例中就可以查找得到




/*********************************************/
//一般js包的编写也离不开这样的

   var YPO = {
  };
  YPO.DOM = {
	createElement:function() {
		alert("createElement!");
	},
	getElement:function() {
		alert("getElement!");
	}
  }

  YPO.DOM.BUTTON = function() {
		alert("creteButton");
  }
  YPO.DOM.createElement(); // createElement!
  new YPO.DOM.createElement();//  createElement!
  YPO.DOM.BUTTON();  // creteButton
  new YPO.DOM.BUTTON();// creteButton
</script>


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
原型与继承

<script>
//JavaScript对象都"继承"原型对象的属性。
//JavaScript中的所有函数都有prototype属性,它引用了一个对象
//虽然原型对象初始化时是空的,但是在其中定义的任何属性都会被该构造函数所创建的对象继承
var a = {
    a1:12
}
a.cc = function() {
	alert(this.a1);
}
a.cc();//
//a.prototype为空或不是对象,说明prototype是为函数提供的,不是为对象提供的。
//a.prototype.gg = function() {
//	alert("gg");
//}
//说明对象(实例)可以动态添加属性
//方法

// 函数可以使用prototype
// 使得函数的对象(实例)继承原型的属性而已。

//alert(a1); undefined
//alert(this.a1);12-->

function dd () {
	this.pp = 1;
	function pa() {
		alert("pa");
		return "函数"
	}
	this.apa = pa;
}
dd.ddf = function() { //
	alert(this.pp);

}
dd.prototype = {
	ddm:function(){
	    var pp = "123";
		alert(this.pp);    // 继承构造函数中的属性
		alert(this.apa()); // 继承构造函数中的函数
		alert(this.aa);    // 继承实例动态添加的属性
	}
}

var ddd = new dd();
ddd.aa= 23;
//动态的添加属性,添加到了原型中去了。因为下面调用的时候输出来了this.aa的值
ddd.ddm();
alert("*************************************************");

function oo(){
	this.vv = 123;
	function pp() {
		alert("***pp*************");
	}
}
var p = new oo()
alert(new oo().vv);     // 123
//alert(new oo().pp()); // 不支持此属性和方法
//alert (oo.pp());    // 不支持此属性和方法

oo.pp = function() {
	alert("pppppp");
}
alert(oo.pp());// pppp
//dd.ddf(); 
//undefined; dd.ddf() 没有继承 dd()的属性
//在ddd.ddm中调用ddf也得不到,说明不是为构造函数添加属性
//说明dd.ddf()与dd()是两个毫不相干的函数而已,没有关系

//若要添加属性 可以直接来对象var a = {};a.cc={CXXXXX};

//ddd.ddf();//对象不支持这个方法
// alert(pp);undefined
// alert(this.pp); 1
</script>
分享到:
评论

相关推荐

    js原型链与继承解析(初体验)

    首先定义一个对象obj,该对象的原型为obj._proto_,我们可以用ES5中的getPrototypeOf这一方法来查询obj的原型,我们通过判断obj的原型是否与Object.prototype相等来证明是否存在obj的原型,答案返回true,所以存在。...

    Javascript中的prototype与继承

    只有构造器才具有prototype属性,原型链继承就是创建一个新的指针,指向构造器的prototype属性。 prototype属性之所以特别,是因为javascript时读取属性时的遍历机制决定的。本质上它就是一个普通的指针。 构造器...

    深入了解javascript中的prototype与继承

    只有构造器才具有prototype属性,原型链继承就是创建一个新的指针,指向构造器的prototype属性。prototype属性之所以特别,是因为javascript时读取属性时的遍历机制决定的。本质上它就是一个普通的指针。构造器包括:...

    浅谈javascript原型链与继承

    js原型链与继承是js中的重点,所以我们通过以下三个例子来进行详细的讲解。  首先定义一个对象obj,该对象的原型为obj._proto_,我们可以用ES5中的getPrototypeOf这一方法来查询obj的原型,我们通过判断obj的原型...

    javascript prototype的深度探索不是原型继承那么简单第1/3页

    1 什么是prototype JavaScript中对象的prototype属性,可以返回对象类型原型的引用。这是一个相当拗口的解释,要理解它,先要正确理解对象类型(Type)以及原型(prototype)的概念。 前面我们说,对象的类(Class)和...

    基于JavaScript实现继承机制之原型链(prototype chaining)的详解

    如果用原型方式重定义前面例子中的类,它们将变为下列形式: 代码如下:function ClassA() {} ClassA.prototype.color = “blue”;ClassA.prototype.sayColor = function () { alert&#40;this.color&#41;;}; ...

    老生常谈Javascript中的原型和this指针

    1、Javascript中的原型...下面来看一个使用原型实现继承的例子: 1.1使用原型实现继承:   function Person(name){ this.name = name; this.getName = function(){ return this.name; } } function Artist(type){

    JavaScript原型和继承

    大牛请路过,好了,让我们一步步来看看js的原型(链)到底有多神秘……在了解原型链之前我们先来看看一个函数在创建过程中做了哪些事情,举一个空函数的例子:functionA(){};当我们在代码里面声明这么一个空函数,js...

    基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解

    构造函数、原型实现继承的缺陷 ...这种方式同样适用于继承机制,用对象冒充继承构造函数的属性,用原型链继承 prototype 对象的方法。用这两种方式重写前面的例子,代码如下: 代码如下:function ClassA(sColo

    戏说JS中的原型-Prototype

    什么是原型:在了解原型链之前我们先来看看一个函数在创建过程中做了哪些事情,举一个空函数的例子:当我们在代码里面声明这么一个空函数,js解析的本质是:1、创建一个对象(有constructor属性及[[Prototype]]属性...

    inherit.js:正确使用原型继承和链接的简单方法

    继承.js inherit.js 是一种在 JavaScript 中正确使用原型链的简单方法。 通常,为了使事情简单,只使用 1 级原型链,因为多级原型链。 这个库使得在原型链中使用任意数量的级别变得非常容易,这有助于保持代码。用法...

    不是原型继承那么简单!!prototype的深度探索

    1 什么是prototype JavaScript中对象的prototype属性,可以返回对象类型原型的引用。这是一个相当拗口的解释,要理解它,先要正确理解对象类型(Type)以及原型(prototype)的概念。 前面我们说,对象的类(Class)和...

    比较详细的javascript对象的property和prototype是什么一种关系

    Prototype 链是 JavaScript 中的一种机制,通过这种机制,对象可以继承父对象的 Property。Prototype 链的终点是 null,Object 的默认 Prototype 是 null。 例如,创建一个新的 JavaScript 对象,对象的 Prototype ...

    javascript中hasOwnProperty() 方法使用指南

    所有继承了 Object.prototype 的对象都会从原型链上继承到 hasOwnProperty 方法,这个方法可以用来检测一个对象是否含有特定的自身属性,和 in 运算符不同,该方法会忽略掉那些从原型链上继承到的属性。 示例 例1...

    Javascript 学习笔记之 对象篇(二) : 原型对象

    Javascript 并没有类继承模型,而是使用原型对象 prototype 进行原型式继承。尽管人们经常将此看做是 Javascript 的一个缺点,然而事实上,原型式继承比传统的类继承模型要更加强大。举个例子,在原型式继承顶端构建...

    js模拟类继承小例子

    代码如下: //使用原型继承,中间使用临时对象作为Child的原型属性,临时对象的原型属性再指向父类的原型, //防止所有子类和父类原型属性都指向通一个对象. //这样当修改子类的原型属性,就不会影响其他子类和父类 ...

    深入理解JavaScript系列(42):设计模式之原型模式详解

    对于原型模式,我们可以利用JavaScript特有的原型继承特性去创建对象的方式,也就是创建的一个对象作为另外一个对象的prototype属性值。原型对象本身就是有效地利用了每个构造器创建的对象,例如,如果一个构造函数...

    6种JavaScript继承方式及优缺点(小结)

    温馨提示:想要更好的理解JS继承方式,须了解构造函数、原型对象、实例化对象、原型链等概念 第一种:原型链继承 利用原型链的特点进行继承 function Parent(){ this.name = 'web前端'; this.type = ['JS','...

    详解一个小实例理解js原型和继承

    导语1:一个构造函数的原型对象,其实就是这个构造函数的一个属性而已,属性名叫prototype,值是一个对象,对象中有一些属性和方法,所以每个构造函数的实例对象都拥有这些属性和方法的使用权。 导语2:构造函数需要...

Global site tag (gtag.js) - Google Analytics