<!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的更多相关文章

  1. JS面向对象——动态原型模型、寄生构造模型

    动态原型模型 组合使用构造函数模型和原型模型,使得OO语言程序员在看到独立的构造函数和原型时很困惑.动态原型模型致力于解决该问题,它把所有的信息封装在构造函数中,通过在构造函数中初始化原型(仅在必要情 ...

  2. JS面向对象——组合使用构造函数模型与原型模型中的隐患

    组合使用构造函数模型和原型模型中的问题,使用对象字面量重写原型模型会有隐患(涉及到原型的动态性),如下例: <!DOCTYPE html> <html> <head> ...

  3. JS面向对象——组合使用构造函数模型与原型模型

    该模型为创建自定义类型最常用的方式. <!DOCTYPE html> <html> <head> <title>组合使用构造函数模型和原型模型</ ...

  4. JS面向对象——原型模型

    以下通过一段示例代码,说明原型模型中的基本概念以及知识点. <!DOCTYPE html> <html> <head> <title>原型模型</ ...

  5. JS原型-语法甘露

    初看原型 JS的所有函数都有一个prototype属性,这个prototype属性本身又是一个object类型的对象. prototype提供了一群同类对象共享属性和方法的机制. 将一个基类的实例作为 ...

  6. JS原型,Prototype,原型

    对于javascript这样一种前端语言,个人觉得,要真正的理解其oop, 就必须要彻底搞清楚javascript的对象,原型链,作用域,闭包,以及this所引用的对象等概念.这些对弄明白了,应该就可 ...

  7. js原型浅谈理解

    之前在学习原型(prototype)的时候,一直对原型的理解不是很清晰,只是知道每个对象都有一个原型,然后在js中万物又皆对象.在这里谈一下自己对于js原型的简单理解吧. 原型可以实现属性和方法的共享 ...

  8. JS 原型链图形详解

    JS原型链 这篇文章是「深入ECMA-262-3」系列的一个概览和摘要.每个部分都包含了对应章节的链接,所以你可以阅读它们以便对其有更深的理解. 对象 ECMAScript做为一个高度抽象的面向对象语 ...

  9. Java设计模式（三）原型模型 适配器型号

    (五岁以下儿童)原型模型 Prototype 样机模型旨在复制一个现有对象来创建新对象.而不是通过的方式的实例.原型模式须要实现 Cloneable 接口.覆写clone方法,复制分为浅复制.深复制. ...

随机推荐

  1. 【转】linux设备驱动程序中的阻塞机制

    原文网址:http://www.cnblogs.com/geneil/archive/2011/12/04/2275272.html 阻塞与非阻塞是设备访问的两种方式.在写阻塞与非阻塞的驱动程序时,经 ...

  2. Java Observable 模式

    一.Observer模式的意图: 在对象的内部状态发生变化时,自动通知外部对象进行响应. 二.Observer模式的构成: ·被观察者:内部状态有可能被改变,而且又需要通知外部的对象 ·观察者:需要对 ...

  3. RDoc

    RDoc - Ruby Documentation System home github.com/rdoc/rdoc rdoc docs.seattlerb.org/rdoc bugs github. ...

  4. struts2异常处理，global-results定义全局结果处理

    <global-results>定义全局结果处理 一般发生异常之后 结果返回errHandler 因为errHandler是由<global-exception-mappings&g ...

  5. Textbox像百度一下实现下拉显示 z

    List<string> Data = new List<string>(); string Randomstr = "功夫撒黑胡椒hcbvf蜂窝qwertyuiop ...

  6. 4. 2D绘制与控件绘制

    绘制基本图形和文本 绘制图形和文本的基本方法 drawPoint(绘制点).drawLine(绘制直线).drawCircle(绘制圆) drawArc(绘制弧).drawText(绘制文本) pac ...

  7. 15stl模板

    1.stack #include<iostream> #include<stdio.h> #include<stack> using namespace std; ...

  8. hdu 1527 取石子游戏（Wythoff Game）

    题意:Wythoff Game 思路:Wythoff Game #include<iostream> #include<stdio.h> #include<math.h& ...

  9. asp.net使用httphandler打包多CSS或JS文件以加快页面加载速度

    介绍 使用许多小得JS.CSS文件代替一个庞大的JS或CSS文件来让代码获得更好的可维 护性,这是一个很好的实践.但这样做反过来却损失了网站的性能.虽然你应该将你的Javascript代码写在小文件中 ...

  10. 在刚接触TI-DM8127-ipnc框架时注意的问题

    1. 修改内存分配不成功? 解决方法: 修改内存分配后需要重新编译mcfw.它影响3个核. 如果修改了cmem需要修改boostara. 2. 命令make clean后在make相机跑不起来? 解决 ...