`
pouyang
  • 浏览: 320054 次
  • 性别: 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>
分享到:
评论

相关推荐

    JavaScript中的prototype(原型)属性研究

    JavaScript中的...总结,JavaScript中的prototype属性是实现面向对象编程的重要组成部分,它涉及到继承、方法共享以及原型链等核心概念。理解并熟练运用这些知识,能够帮助开发者构建更复杂、更高效的应用程序。

    基于js中的原型、继承的一些想法.docx

    ### 基于JS中的原型、继承的理解与探讨 #### 一、`instanceof` 运算符 在JavaScript中,`instanceof`是一个非常重要的关键字,用于判断一个对象是否为某个构造函数的实例。其基本语法为 `instanceA instanceof A`...

    浅析Javascript原型继承 推荐第1/2页

    在深入探讨JavaScript的原型继承之前,首先要明确的是JavaScript中并没有类似其他编程语言中的类继承的概念。虽然有传言JavaScript 2.0将加入类继承机制,但考虑到要让所有浏览器支持新特性可能需要很长时间,因此...

    探索JavaScript的原型链:原型继承的奥秘

    #### 一、JavaScript与原型继承的基础 JavaScript(简称JS)是一种广泛使用的高级编程语言,在Web开发中占据着核心地位。它的特性之一是基于原型的继承机制,这与其他采用类继承的语言(如Java或C#)形成了鲜明对比...

    浅析javascript原型继承机制

    ### 浅析JavaScript原型继承机制 #### 一、引言 JavaScript作为一种动态语言,其对象模型与传统的面向对象编程语言有所不同。在JavaScript中,并没有直接提供类的概念,而是通过原型来实现继承。本文将深入探讨...

    javascript原型继承工作原理和实例详解_.docx

    ### JavaScript原型继承工作原理及实例详解 #### 一、引言 JavaScript作为一种广泛使用的脚本语言,在Web开发中扮演着重要角色。其独特的面向对象机制是通过原型继承来实现的,这种机制使得JavaScript能够灵活地...

    js中的继承与原型链1

    虽然JavaScript的原型继承机制最初可能看起来复杂,但它提供了强大的灵活性,使得对象能够共享属性和方法,从而实现类似于类继承的功能。这种模式在实践中已被广泛应用,尤其是在创建可复用的代码和模块时。然而,...

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

    总结来说,JavaScript的原型链和继承机制是通过`__proto__`、`Object.getPrototypeOf`、`Object.create`以及函数的`prototype`属性实现的。这种机制使得JavaScript具有了面向对象的能力,让代码能够复用和扩展。理解...

    详解JavaScript中基于原型prototype的继承特性

    与传统面向对象编程语言不同的是,JavaScript没有使用类的继承,而是采用了基于原型链的继承机制。原型链是JavaScript实现继承的核心特性。 首先,原型链依赖于构造函数,每个函数都有一个prototype属性,指向一个...

    prototype小例子

    `prototype`是每个函数(在JavaScript中,函数也是对象)都有的一个属性,用于实现对象间的原型继承。在这个"prototype小例子"中,我们将探讨这个核心机制以及如何使用它。 首先,我们理解`prototype`的基本作用。...

    js原型继承的两种方法对比介绍.docx

    ### JS原型继承的两种方法对比介绍 #### 一、引言 在JavaScript中,对象间的继承机制主要依赖于原型链。原型链的概念使得JavaScript能够实现动态面向对象编程,并且提供了非常灵活的对象创建与继承的方式。在实际...

    js代码-原型链继承demo

    在JavaScript中,原型链继承是实现面向对象...总的来说,"js代码-原型链继承demo"是一个学习和实践JavaScript原型链继承的实例,通过阅读和理解代码,你可以深入理解JavaScript的继承机制,并能够运用到实际项目中。

    javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式

    在面向对象编程中,对象可以继承自其他对象的属性和方法,这就是所谓的原型继承。在JavaScript里,每个函数都有一个`prototype`属性,这个属性指向一个对象,这个对象就是用来实现继承的原型对象。 当我们使用`new`...

    prototype自己做的一个例子

    在JavaScript中,`prototype`是一个非常重要的概念,它关乎到对象继承和函数原型。当我们谈论`prototype`时,我们实际上是在讨论JavaScript中的面向对象编程特性。在这个“prototype自己做的一个例子”中,我们将...

    javascript prototype原型详解(比较基础)

    JavaScript中的`prototype`原型是理解面向对象编程的关键概念之一,尤其在JavaScript中,它是一种实现对象继承的方式。本文将深入探讨`prototype`的基本概念、作用以及通过代码实例来阐述其工作原理。 首先,每个...

    Javascript中的prototype与继承

    prototype是JavaScript中实现原型继承的基础,它允许一个对象从另一个对象上继承属性和方法。通过了解prototype与继承的工作机制,开发者能够编写出更加高效和可复用的代码。 首先,让我们先明确几个基本概念。在...

    JS原型与继承操作示例

    通过原型,JavaScript实现了一种称为“原型继承”的机制。 2. 原型对象: 每个函数都有一个原型属性(prototype),默认指向一个空的原型对象。在原型对象上定义的属性和方法,可以被该函数创建的所有实例共享。这...

    JS原型继承四步曲及原型继承图一览

    "JS原型继承四步曲"是指通过以下四个步骤实现类的继承: 1. **创建父类**: 在这个例子中,我们创建了一个名为`Animal`的函数,作为父类。这个父类有一个`name`属性,并有一个`eat`方法,用于表示动物吃东西的行为...

    prototypeJS脚本的讲解+实例

    1. **对象原型和继承**:PrototypeJS 强化了JavaScript的原型机制,使得对象间的继承变得简单。通过`Object.extend()`方法可以实现对象属性的复制,`Prototype.Browser`就是一个使用此方法的例子,它检测不同浏览器...

Global site tag (gtag.js) - Google Analytics