<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <script type="text/javascript">

             /*

              *

              * 创建一个Person构造函数

              *     - 在Person构造函数中，为每一个对象都添加了一个sayName方法，目前我们的方法是在构造函数内部创建的，

              *         也就是构造函数每执行一次就会创建一个新的sayName方法，也就是所有实例的sayName都是唯一的。

              *         这样就导致了构造函数执行一次就会创建一个新的方法，

              *             执行10000次就会创建10000个新的方法，而10000个方法都是一摸一样的

              *             这是没有必要的，完全可以使所有的对象共享同一个方法

              *

              */

             function PersonOne(name , age , gender){

                 this.name = name;

                 this.age = age;

                 this.gender = gender;

                 //向对象中添加一个方法

                 this.sayName = function(){

                     alert("Hello大家好，我是："+this.name);

                 }

             }

             //创建一个Person的实例

             var per = new PersonOne("孙悟空",18,"男");

             var per2 = new PersonOne("猪八戒",28,"男");

             per.sayName();

             per2.sayName();

             //------------------------------------------------------------------------------------

             //那怎么办呢？试着将sayName方法在全局作用域中定义

             function PersonTwo(name , age , gender){

                 this.name = name;

                 this.age = age;

                 this.gender = gender;

                 //向对象中添加一个方法

                 this.sayName = fun;

             }

             function fun(){

                 alert("Hello大家好，我是:"+this.name);

             };

             //创建一个Person的实例

             var per = new PersonTwo("孙悟空",18,"男");

             var per2 = new PersonTwo("猪八戒",28,"男");

             per.sayName();

             per2.sayName();

             /*

              * 可是将函数定义在全局作用域，污染了全局作用域的命名空间

              *     而且定义在全局作用域中也很不安全

              */

             //------------------------------------------------------------------------------------

             //那么可以怎么改呢？向原型中添加sayName方法

             /**

              * 以后我们创建构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中，

              *     这样不用分别为每一个对象添加，也不会影响到全局作用域，就可以使每个对象都具有这些属性和方法了

              */

             function PersonThree(name , age , gender){

                 this.name = name;

                 this.age = age;

                 this.gender = gender;

             }

             //向原型中添加sayName方法

             PersonThree.prototype.sayName = function(){

                 alert("Hello大家好，我是:"+this.name);

             };

             //创建一个Person的实例

             var per = new PersonThree("孙悟空",18,"男");

             var per2 = new PersonThree("猪八戒",28,"男");

             per.sayName();

             per2.sayName();

         </script>

     </head>

     <body>

     </body>

 </html>

JS基础_构造函数修改的更多相关文章

  1. JS基础_构造函数

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. JS基础(三)构造函数

    JS中的构造函数 <script language="JavaScript"> window.onload = function(){ function Bottle( ...

  3. JS基础_对象的简介、对象的基本操作

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. JS基础_函数的简介

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. JS基础_基本数据类型和引用数据类型

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. JS基础_数据类型-String类型

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. JS基础_标识符

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. JS基础_使用工厂方法创建对象（了解下就行了，用的不多）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. JS基础_全局作用域

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. Java 13新特性

    switch表达式 switch表达式是Java 12开始就提供的预览特性,到了Java 13仍然没有被转正.此特性可以把switch的执行结果组合到复合表达式中进行运算. import java.t ...

  2. Android：状态栏禁用时蓝牙多文件传输弹窗及进度显示

    一.蓝牙文件传输弹窗 Android原生蓝牙传输文件时,会弹出蓝牙文件接收的确认框且默认是以notification的形式显示在状态栏,当用户点击之后才会弹出一个dialog.那么当状态栏被禁用时,如 ...

  3. Linux -- 管理锁争用(翻译)

    在多线程应用中,程序员会使用互斥锁(mutex)来同步线程进入可访问共享资源的代码区域的行为.受这些锁保护的代码区域被称为关键代码段(Critical Section).如果关键代码段中已存在一个线程 ...

  4. SM30维护视图屏蔽按钮与增加选择条件

    *---------------------------------------------------------------------- * TABLES/Structure *-------- ...

  5. ubuntu18.04开机提示welcome to emergency mode! after logging in type...的解决办法

    开机就是报错,进不了系统. 原因是我的ubuntu电脑绑定了之前的移动硬盘,而我开机的时候并没有插着移动硬盘. 所以解决办法是,在此命令行下,以root用户的身份(我这里默认是root用户),vim ...

  6. gd库的相关内容

    gd库注意事项 对于乱码问题 在php里面包含 header("content-type:image/png"); 这样输出的图像就不会乱码了后面跟的Png也可以改变为自己想要输出 ...

  7. darknet标签转化为COCO标签

    import sys import json import cv2 import os import shutil dataset = { "info": { "desc ...

  8. 渡鸦币（Raven）钱包交叉编译详解

    1 环境准备 1.1 准备Ubuntu 准备虚拟机或物理机,操作系统为Ubuntu 16.04 1.2 安装Mingw sudo apt-get install g++-mingw-w64-i686 ...

  9. windows服务器入门 mysql的安装

    钱的问题   只能安装mysql了 下载MySQL 5.5(其他的版本都可以的  只是在这里以mysql5.5为例)安装包(下载地址:http://dev.mysql.com/downloads/my ...

  10. Flink SQL项目实录

    一.Flink SQL层级 为Flink最高层的API,易于使用,所以应用更加广泛,eg. ETL.统计分析.实时报表.实时风控等. Flink SQL所处的层级: 二.Flink聚合: 1.Wind ...