js 原型模型重写1

时间：2022-09-20 23:39:21
 <!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>

js 原型模型重写1

但又存在另外一种问题：

 <!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&gt ...

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

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

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

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

  5. JS原型-语法甘露

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

  6. JS原型&comma;Prototype&comma;原型

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

  7. js原型浅谈理解

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

  8. JS 原型链图形详解

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

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

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

随机推荐

  1. 基于Simple Image Statistics（简单图像统计&comma;SIS&rpar;的图像二值化算法。

    这是个简单的算法,是全局二值算法的一种,算法执行速度快. 算法过程简单描述如下: 对于每一个像素,做如下处理 1.计算当前像素水平和垂直方向的梯度. (two gradients are calcul ...

  2. Unit03 - 对象内存管理 、 继承的意义（上）

    Unit03 - 对象内存管理 . 继承的意义(上) 1.内存管理:由JVM来管理的  1)堆:    1.1)存储所有new出来的对象(包含成员变量)    1.2)没有任何引用所指向的对象就是垃圾 ...

  3. isIsomorphic

    超时版: /* Given two strings s and t, determine if they are isomorphic. Two strings are isomorphic if t ...

  4. Ubuntu环境下手动配置HBase0&period;94&period;25

    /×××××××××××××××××××××××××××××××××××××××××/ Author:xxx0624 HomePage:http://www.cnblogs.com/xxx0624/ ...

  5. Codeforces Round &num;207 &lpar;Div&period; 2&rpar;C

    读错题意了..线段树延迟标记 白刷这么多线段树 #include <iostream> #include<cstdio> #include<cstring> #in ...

  6. C语言-01基础语法

    1)         总结常见文件的拓展名 .c 是C语言源文件,在编写代码的时候创建 .o 是目标文件,在编译成功的时候产生 .out 是可执行文件,在链接成功的时候产生 2)         总结 ...

  7. golang windows 安装方法

    编译器下载链接:https://golang.org/dl/ 默认安装到C盘,不用修改.   添加环境变量:     配置环境变量:   注:C:\mygo\bin 配置这个后,则可以直接在 Dos ...

  8. Flask web开发之路十四

    今天开始Flask的实战,创建一个项目,实现包括用户登录.注册.注销.发表博客.评论以及检索等功能 首先给出项目结构: 1.config.py文件: 存放各种配置信息 import os # dial ...

  9. kbmmw 中的进程管理小工具

    kbmmw 5.6.20 发布了,本版本带来一个小功能,就是可以在kbmmw 应用里面建立和管理进程, 虽然你可以直接调用windows api 做类似的事情,但是kbmmw 里面简化了操作,也加强了 ...

  10. 如何获取隔壁wifi密码，非暴力破解

    目前常见的Wi-Fi加密方式有WEP.WPA2和WPS(链接为各自的破解方式),不过有网友反映以往破解WPA2的方法耗时太长,而且不适用于所有WPS启动的接入点.而今天介绍的这种方法则更加省时省力. ...

相关文章