js 原型模型重写1
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title> <script type="text/javascript"> function Person(){ } /**
* 使用如下犯法来编写代码，当属性和方法特别多的时候，编写起来不是很方便，
* 可以通过json的格式 Person.prototype.name = "Leon";
Person.prototype.age = 23;
Person.prototype.say = function(){
console.info(this.name + " " + this.age);
}
*/
/**
* 以下方式将会重写原型
* 由于原型重写，而且没有通过Person.propotype来指定，
* 此时的constructor不会指向Person而是指向Object，
* 如果constructor真的比较重要，可以在json中说明原型的指向constructor : Person ,
*/
Person.prototype = {
// constructor : Person ,//手动指定constructor
name : "Leon",
age : 23,
say : function(){
console.info(this.name + " , " + this.age);
}
} var p1 = new Person();
p1.say(); //Leon , 23
console.info(p1.constructor == Person); //false 如果取消注释掉的constructor : Person , 此时结果为true
console.info(p1.constructor); // Object() 如果取消注释掉的constructor : Person , 此时结果为Person() </script> </head>
<body> </body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title> <script type="text/javascript"> function Person(){ } var p1 = new Person(); Person.prototype.sayHi = function(){
console.info(this.name + " : hi ");
for(var o in Person.prototype){
console.info(o);
}
}
p1.sayHi(); //undefined : hi sayHi /**
* 如果把重写放置在new Person（）之后，注意内存模型
*/
Person.prototype = {
// constructor : Person ,//手动指定constructor
name : "Leon",
age : 23,
say : function(){
console.info(this.name + " , " + this.age);
}
}
p1.sayHi();////undefined : hi name age say var p2 = new Person();
p1.say(); //TypeError: p1.say is not a function
p2.say(); //Leon , 23
p2.sayHi(); //TypeError: p2.sayHi is not a function </script> </head>
<body> </body>
</html>
但又存在另外一种问题：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title> <script type="text/javascript"> /**
* 基于原型的创建虽然可以有效的完成封装，但是依然有一些问题
* 1 无法通过构造函数来设置属性值
* 2 当属性中的引用类型变量是可能存在变量值重复
*/
function Person(){ }
Person.prototype = {
constructor : Person,
name : "Leon" ,
age : 30 ,
friends : ["Ada","Chris"],
say : function(){
console.info(this.name + "[" + this.friends + "]");
}
} var p1 = new Person();
p1.name = "Jhon";
p1.say(); //Jhon[Ada,Chris] console.info(p1.__proto__);
/**
* 输出结果：
* age 30
* friends ["Ada", "Chris", "Mike"]
* name "Leon"
* constructor Person()
* say function()
*/ var p2 = new Person();
p2.say(); //Leon[Ada,Chris] //会在原型中找friends，所有Mike是在原型中增加的
p1.friends.push("Mike"); //为p1增加了一个朋友
//此时原型汇总就多了一个mike，这就是原型带来的第二个问题
p1.say(); //Jhon[Ada,Chris,Mike]
p2.say(); //Leon[Ada,Chris,Mike]
console.info(p1.__proto__);
console.info(p2.__proto__);
/**
* 输出结果：
* age 30
* friends ["Ada", "Chris", "Mike"]
* name "Leon"
* constructor Person()
* say function()
*/ </script> </head>
<body> </body>
</html>
js 原型模型重写1的更多相关文章
- JS面向对象——动态原型模型、寄生构造模型
动态原型模型 组合使用构造函数模型和原型模型,使得OO语言程序员在看到独立的构造函数和原型时很困惑.动态原型模型致力于解决该问题,它把所有的信息封装在构造函数中,通过在构造函数中初始化原型(仅在必要情 ...
- JS面向对象——组合使用构造函数模型与原型模型中的隐患
组合使用构造函数模型和原型模型中的问题,使用对象字面量重写原型模型会有隐患(涉及到原型的动态性),如下例: <!DOCTYPE html> <html> <head> ...
- JS面向对象——组合使用构造函数模型与原型模型
该模型为创建自定义类型最常用的方式. <!DOCTYPE html> <html> <head> <title>组合使用构造函数模型和原型模型</ ...
- JS面向对象——原型模型
以下通过一段示例代码,说明原型模型中的基本概念以及知识点. <!DOCTYPE html> <html> <head> <title>原型模型</ ...
- JS原型-语法甘露
初看原型 JS的所有函数都有一个prototype属性,这个prototype属性本身又是一个object类型的对象. prototype提供了一群同类对象共享属性和方法的机制. 将一个基类的实例作为 ...
- JS原型,Prototype,原型
对于javascript这样一种前端语言,个人觉得,要真正的理解其oop, 就必须要彻底搞清楚javascript的对象,原型链,作用域,闭包,以及this所引用的对象等概念.这些对弄明白了,应该就可 ...
- js原型浅谈理解
之前在学习原型(prototype)的时候,一直对原型的理解不是很清晰,只是知道每个对象都有一个原型,然后在js中万物又皆对象.在这里谈一下自己对于js原型的简单理解吧. 原型可以实现属性和方法的共享 ...
- JS 原型链图形详解
JS原型链 这篇文章是「深入ECMA-262-3」系列的一个概览和摘要.每个部分都包含了对应章节的链接,所以你可以阅读它们以便对其有更深的理解. 对象 ECMAScript做为一个高度抽象的面向对象语 ...
- Java设计模式（三）原型模型 适配器型号
(五岁以下儿童)原型模型 Prototype 样机模型旨在复制一个现有对象来创建新对象.而不是通过的方式的实例.原型模式须要实现 Cloneable 接口.覆写clone方法,复制分为浅复制.深复制. ...
随机推荐
- NodeJS学习笔记之MongoDB模块
其中还有,nodejs远程连接mysql数据库 一,开篇分析 这篇属于扩展知识篇,因为在下面的文章中会用到数据库操作,所以今天就来说说它(Mongodb模块). (1),简介 MongoDB是一个基于 ...
- Readonly与const初识
对于readonly和const,很多人无法具体区分,不清楚它们的具体使用场合:现在我们分析它们之间的区别和使用场合. const是一个编译期常量:const只能用于修饰基元类型.枚举类型或者字符串类 ...
- C#格式化小数位的方法
C#格式化字符串还是很方便的,之前一直没用过,也就没有缘分了解 Double dValue = 95.12345; int iValue = 10000; string strValue = &quo ...
- [Everyday Mathematic]20150217
设 $f:\bbR\to\bbR$ 二阶可微, 适合 $f(0)=1$, $f'(0)=0$, 并且 $$\bex f''(x)-5f'(x)+6f(x)\geq 0. \eex$$ 试证: $$\b ...
- mysql Access denied for user \'root\'@\'localhost\'”解决办法总结，下面我们对常见的出现的一些错误代码进行分析并给出解决办法，有需要的朋友可参考一下。
mysql Access denied for user \'root\'@\'localhost\'”解决办法总结,下面我们对常见的出现的一些错误代码进行分析并给出解决办法,有需要的朋友可参考一下. ...
- DzzOffice共享文件夹、共享目录设置
dzzoffice中共享目录的设置,是通过机构部门建立的. 首先打开机构用户管理.建立需要的机构和部门.这里机构和部门可以理解为共享目录的名称.也可以根据自己需要起名,并不一定是机构和部门的名字. 而 ...
- mysql error： Access denied for user 'root'@'localhost' (using password: YES)
昨天重装了下系统,安装好mysql后,安装了客户端工具连接mysql,提示Access denied for user 'root'@'localhost' (using password: YES) ...
- how to install flash
Choice 1: Install Flash from Repository: This is fairly simple and easy and should work from most p ...
- Eclipse或Myeclipse常用快捷键组合详解
Eclipse 是一个开放源代码的.基于Java的可扩展开发平台,就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境.. Eclipse(Myeclipse)中有很多便于开发的快捷键 ...
- bzoj2940: [Poi2000]条纹
2940: [Poi2000]条纹 条纹游戏是一个双人的游戏.所需要的物品有一个棋盘以及三种颜色的长方形条纹,这三种颜色分别是红色.绿色和蓝色.所有的红色条纹的尺寸是c*1,所有的绿色条纹的尺寸是z* ...