<!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. 为什么vue-cli创建的build文件下没有dev-server.js文件

    在新版本的Vue开发中,通过vue-cli创建的build文件夹下面已经没有了旧版本中的dev-server.js文件新版本的vue已将dev-server.js与webpack.dev.conf.j ...

  2. 自定义控件之Region区域

    构造Region 直接构造 public Region(Region region) //复制一个同样的Region变量 public Region(Rect r) public Region(int ...

  3. throws和throw的使用

    throws 用在方法定义上 后面跟一个或者多个异常名称 如果是多个异常名称,之间使用","隔开 , 表达的意思是给该方法添加一个或者多个异常声明; 告诉调用者该方法可能会出现问题 ...

  4. ISO/IEC 9899:2011 条款6.4.9——注释

    6.4.9 注释 1.除了在一个字符常量.一个字符串字面量.或一个注释内,字符 /* 引入一个注释.这么一个注释的内容被检查仅用于标识多字节字符,并且要找到 */ 来终结.［注:从而,/* ... * ...

  5. 整理Mac系统 node-sass 安装失败的原因及解决办法

    转载与:https://segmentfault.com/a/1190000010984731 声明:本文非原创,如有侵权请留言或发邮件告知,作者会立即停止侵权并删除本文.发布此文章主要是希望跟作者遇 ...

  6. osgViewer::View::setUpViewOnSingleScreen()

    void ViewerBase::frame(double simulationTime) { if (_done) return; // OSG_NOTICE<<std::endl< ...

  7. [Paper翻译]Scalable Lock-Free Dynamic Memory Allocation

    原文: http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.87.3870&rep=rep1&type=pdf Abstr ...

  8. Spring Cloud(7.2)：配置Producer Server

    我们首先创建一个生产者服务.这里以一个商品价格服务为例,这个微服务可以对商品-价格信息进行增删改查,当有商品-价格信息被更新或删除,则该微服务发送消息,告诉其他调用它的系统这条信息已经被修改. 配置p ...

  9. Spring Boot学习笔记——Spring Boot与ActiveMQ的集成

    Spring Boot对JMS(Java Message Service,Java消息服务)也提供了自动配置的支持,其主要支持的JMS实现有ActiveMQ.Artemis等.这里以ActiveMQ为 ...

  10. 【Leetcode_easy】617. Merge Two Binary Trees

    problem 617. Merge Two Binary Trees     参考 1. Leetcode_easy_617. Merge Two Binary Trees; 完