<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>prototype.html</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
</head>
<body>
<div id="div"></div>
<script type="text/javascript">
// <![CDATA[
//$(document).ready(function() {
//});
//如果你需要在没有硬编码的window标识符下访问全局对象，你可以在任何层级的函数作用域中做如下操作：
var global = (function () {
return this;
})();
var count = 0;
function show(str) {
$("#div").append($("<p></p>").text("" + str));
}
//新创建对象的原型是从当前时刻函数的prototype属性获取的，这意味着同一个构造函数创建的两个对象的原型可以不同；
//这是因为构造函数的prototype属性也可以不同。
//function.funcName声明的是static函数
function BaseClass() {
this.name = "BaseClassName";
this.showMsg = function() {
show("BaseClass::showMsg::" + this.name);
};
this.baseShowMsg = function() {
show("BaseClass::baseShowMsg::" + this.name);
};
}
BaseClass.showMsg = function() {
show("BaseClass::showMsg static name = " + this.name);
};
function ExtendClass() {
this.name = "ExtendClassName";
this.showMsg = function () {
show("ExtendClass::showMsg::" + this.name);
};
}
ExtendClass.showMsg = function() {
show("ExtendClass::showMsg static name = " + this.name);
};
//通过prototype实现继承
ExtendClass.prototype = new BaseClass();
//设置constructor
ExtendClass.prototype.constructor = ExtendClass;
var instance = new ExtendClass();
instance.showMsg(); //ExtendClass::showMsg::ExtendClassName
//相当于instance.__proto__.baseShowMsg() this指向instance
instance.baseShowMsg(); //BaseClass::baseShowMsg::ExtendClassName
ExtendClass.prototype.showMsg(); //BaseClass::showMsg::BaseClassName
ExtendClass.prototype.showMsg.call(instance); //BaseClass::showMsg::ExtendClassName
//static方法调用，BaseClass.__proto__是Function.prototype
//this指向function类型的BaseClass对象，
show(BaseClass.__proto__ == Function.prototype); //true
//static方法的this指向fuction本身，fuction名称本身是Function的实例
BaseClass.showMsg(); //BaseClass::showMsg static name = undefined
ExtendClass.showMsg(); //ExtendClass::showMsg static name = undefined
//创建对象之后修改构造函数的原型对象(不是替换)，指向的还是同一个原型对象，则所有修改前后创建的对象都指向修改后的原型对象。
ExtendClass.prototype.baseShowMsg = function() { show("prototype::baseShowMsg"); };
instance.baseShowMsg(); //prototype::baseShowMsg
var str = "";
for(var key in ExtendClass.prototype) {
str += key;
str += "=";
str += ExtendClass.prototype[key];
show(str);
str = "";
}
//name=BaseClassName
//showMsg=function() { show("BaseClass::showMsg::" + this.name); }
//baseShowMsg=function() { show("prototype::baseShowMsg"); }
//constructor=function ExtendClass() { this.name = "ExtendClassName"; this.showMsg = function () { show("ExtendClass::showMsg::" + this.name); }; }
//创建对象之后替换构造函数的prototype，已创建的对象继续指向原来的prototype对象，此时修改前后的对象的__proto__不再是同一个对象。
ExtendClass.prototype = new BaseClass();
var instance1 = new ExtendClass();
//替换原型对象
ExtendClass.prototype = {id : "json", baseShowMsg : function() { show("json::baseShowMsg"); }};
show(instance1.id); //undefined
instance1.baseShowMsg(); //BaseClass::baseShowMsg::ExtendClassName
//instance2指向新的原型对象
var instance2 = new ExtendClass();
show(instance2.id); //json
instance2.baseShowMsg(); //json::baseShowMsg
//对象独立于构造函数,构造函数完成了自己的主要工作（创建对象）以后可以删除。原型对象通过引用__proto__属性继续存在
ExtendClass.prototype = new BaseClass();
var instance3 = new ExtendClass();
show(instance3.id); //undefined
//为原型对象增加属性
ExtendClass.prototype.id = "new id";
ExtendClass.prototype.func = function() { show("new.func() invoked"); };
show(instance3.id); //new id
instance3.func(); //new.func() invoked
//instanceof操作符是和原型链一起工作的，而不是构造函数
ExtendClass.prototype = new BaseClass();
var instance4 = new ExtendClass();
show(instance4 instanceof BaseClass); //true
ExtendClass.prototype.id = "new id";
show(instance4 instanceof BaseClass); //true
ExtendClass.prototype = {id : "json", baseShowMsg : function() { show("json::baseShowMsg"); }};
show(instance4 instanceof BaseClass); //true
//instance4是ExtendClass创建的对象，instanceof是比较prototype是否在同一个原型链上
show(instance4 instanceof ExtendClass); //false
var instance5 = new ExtendClass();
show(instance5 instanceof BaseClass); //false
//Object.prototype.hasOwnProperty(attr):判断一个对象是否包含自定义属性而不是原型链上的属性
var foo = {
value : 42,
method : function() {}
};
show(foo.hasOwnProperty("value")); //true
show(foo.hasOwnProperty("method1")); //false
//JavaScript 不会保护 hasOwnProperty 被非法占用，因此如果一个对象碰巧存在这个属性，就需要使用外部的 hasOwnProperty 函数来获取正确的结果。
show(Object.prototype.hasOwnProperty.call(foo, "method")); //true
// ]]>
</script>
</body>
</html>
分享到：
相关推荐
### JavaScript Prototype原型操作知识点 #### 一、Prototype基础概念 **Prototype** 在 JavaScript 中是一个非常重要的概念，它支持面向对象编程中的继承特性。每个 JavaScript 对象都有一个内部属性 `[...
javascript的prototype原型简单介绍: prototype原型是javascript中特别重要的概念，属于必须要掌握，如果没有良好的掌握的话，进一步用好或者学好js基本是不可能的实现的事情，并且此概念稍有难度，可能对于初次接触...
JavaScript中的prototype机制是其面向对象编程的核心概念之一，它允许开发者创建具有继承属性和方法的对象。在JavaScript中，几乎所有的对象都是通过某个构造函数或对象字面量创建的，而这些构造函数或对象自身都有...
JavaScript中的原型链（Prototype Chain）是理解面向对象编程在JavaScript中的实现方式的关键概念。原型链是基于原型（Prototype）机制的一种实现，它允许对象继承其他对象的属性和方法。在JavaScript中，每个函数...
Function 类型有一个属性 prototype，直接翻译过来就是原型。这个属性就是一个指针，指向一个对象，这个对象包含一些属性和方法，这些属性和方法会被当前函数生成的所有实例（对象）所共享。 这句话根据前面所说的，...
JavaScript中的原型(Prototype)是理解JavaScript继承机制的关键概念。它是一种对象属性，允许一个对象访问并继承另一个对象的属性和方法。在这个“javascript prototype文档”中，我们可以期待深入学习JavaScript...
JavaScriptprototype的深度探索不是原型继承那么简单.pdf
JavaScript中的`prototype`是一个核心概念，它涉及到对象继承和函数原型。在JavaScript中，每创建一个函数，该函数就会自动获得一个名为`prototype`的属性，这个属性是一个对象，用于实现对象间的继承。同时，每个...
在JavaScript编程语言中，prototype原型和原型链是理解其面向对象特性的核心概念。JavaScript是一种基于原型的语言，它与传统的面向对象语言（如Java或C#）不同，后者是基于类的继承模型。而JavaScript使用原型链来...
JavaScript中的原型模式是一种实现面向对象编程（OOP）的关键机制，它基于原型继承，使得对象可以从其他对象那里获得属性和方法。在这个模式下，每个函数都有一个`prototype`属性，这个属性是一个对象，用于共享属性...
在JavaScript中，每个函数都有一个prototype属性，这个属性指向一个对象，这个对象就是所谓的原型对象。当我们创建一个函数实例时，实例会自动获取一个内部属性[[Prototype]]，这个属性通常通过`__proto__`或者`...
**原型设计模式(Prototype Pattern)**是一种创建型设计模式，它允许我们通过复制现有的对象来创建新对象，而不是通过构造函数来实例化新对象。在面向对象编程中，当我们需要频繁地创建具有相同或相似属性的对象时，...
JavaScript中的prototype是实现原型继承的关键，它允许我们向对象添加方法和属性。下面将详细介绍使用prototype实现封装、继承和多态的概念以及相关的代码示例。 首先，封装是面向对象编程中的一个核心概念，它涉及...
JavaScript中的构造函数、`new`操作符和`prototype`属性也与原型链紧密相关。当我们使用`new`关键字调用一个构造函数时，会创建一个新的对象，这个新对象的`[[Prototype]]`被设置为构造函数的`prototype`属性所指向...
原型是JavaScript中一个比较难理解的概念，原型相关的属性也比较多，对象有"[[prototype]]"属性，函数对象有"prototype"属性，原型对象有"constructor"属性。 为了弄清原型，以及原型相关的这些属性关系，就有了这篇...
这个压缩包文件“JavaScript_Prototype(源代码+中文手册).rar”包含了关于JavaScript原型的源代码和中文手册，为学习和理解这一主题提供了丰富的资源。 JavaScript是一种动态类型的语言，其核心特性之一就是原型...