当前位置： 首页 > news >正文

JavaScript学习12 JS中定义对象的几种方式【转】

news 来源：原创 2024/5/17 19:06:35 
<script language="javascript" type="text/javascript">
        //（1）把一个方法变成一个对象，为对象创建方法和属性
        var Name = function () {
            //通过prototype给一个对象创建方法
            Name.prototype.Add = function (num, title) {
            }
            //也可以直接用this加方法名为对象创建方法和上面的等价
            this.Way = function (str) {
            }
            //为对象添加属性值
            Name.prototype.xing = "123";

            //定义静态属性和方法
            Name.shi = "static";
            Name.Addd = function (num, title) {
            }
            //静态定义的局部属性和方法只能在静态的类型里面用
            alert(Name.shi);
            Name.Addd(1, 2);

        }
        //方法也可以这样声明
        function Name1() {
            Name1.prototype.add = function () { }
            this.way = function () { }
            Name1.prototype.shu = "other";
        }
        //静态定义的全局属性和方法通用
        Name.sha = "static";
        Name.Addd2 = function () {
        }
        alert(Name.sha); //调用静态属性
        Name.Addd2(); //调用静态方法
        var name = new Name();
        name.Add(); //对象调用方法
        name.Way();
        alert(name.xing); //对象调用属性
        /*静态的全局变量，在方法外可以调用；静态的局部变量和方法仅限于方法内使用；实例对象不能调用静态的方法 */
        /*实例对象不能使用prototype; */


        //(2)Javascript面向对象 继承
        //父类
        function Class() {
            this.name = "name";
            this.method = function () {
                alert("method");
            }
        }
        //子类
        function Class1() {
            this.name1 = "name1";
            this.method1 = function () {
                alert("method1");
            }
        }
        //子类继承父类
        Class1.prototype = new Class();
        var obj = new Class1();
        alert(obj.name);
        alert(obj.name1);
        obj.method();
        obj.method1();
        /******  子类继承父类的语法，子类.prototype=new 父类();  *****/
        //（3）子类重写父类
        //子类
        function Class2() {
            this.name2 = "name2";
            this.method2 = function () {
                alert("method2");
            }
        }
        Class2.prototype = new Class(); //继承
        Class2.prototype.name = "updateName"; //重写父类的属性
        Class2.prototype.method = function () {//重写父类的方法
            alert("UpdateMethod");
        }
        var obj2 = new Class2();
        alert(obj2.name); //显示updateName
        obj2.method(); //显示UpdateMethod
        alert(obj2.name2);
        obj2.method2();

        //(4){}里面的为对象
        var arr = new Array();
        arr.push({ "name": "1", "age": 12, funA: function () { } });
        arr.push({ "name": "2", "age": 13 });
        arr.push({ "name": "3", "age": 14 });
        for (var i = 0; i < arr.length; i++) {
            alert(arr[i].name);
            alert(arr[i].age);
            alert(arr[i].funA());
        }
        /****一个对象也可以这么定义***/
        var newObject = {
            "name": "Jim",
            "sex": "Man",
             Way: function () { } 
        };
    </script>
ＪＳ面向对象

 

avaScript学习12 JS中定义对象的几种方式

  转自：  http://www.cnblogs.com/mengdd/p/3697255.html

　　JavaScript中没有类的概念，只有对象。

　　在JavaScript中定义对象可以采用以下几种方式：

　　1.基于已有对象扩充其属性和方法

　　2.工厂方式

　　3.构造函数方式

　　4.原型(“prototype”)方式

　　5.动态原型方式

 

一.基于已有对象扩充其属性和方法

复制代码
  
<script type="text/javascript">
var object = new Object();
object.name = "zhangsan";
object.sayName = function(name)
{
       this.name = name;
       alert(this.name);
}
object.sayName("lisi");
</script>
复制代码
复制代码

　　这种方式的弊端：这种对象的可复用性不强，如果需要使用多个对象，还需要重新扩展其属性和方法。

 

二.工厂方式

复制代码
复制代码 
function createObject()
{
       var object = new Object();
       object.username = "zhangsan";
       object.password = "123";

       object.get = function()
       {
              alert(this.username + ", " + this.password);
       }
       return object;
}

var object1 = createObject();
var object2 = createObject();

object1.get();
复制代码
复制代码

 

改进一：采用带参数的构造方法：

复制代码
复制代码 
function createObject(username, password)
{
       var object = new Object();

       object.username = username;
       object.password = password;

       object.get = function()
       {
              alert(this.username + ", " + this.password);
       }

       return object;
}

var object1 = createObject("zhangsan", "123");

object1.get();
复制代码
复制代码

 

改进二：让多个对象共享函数对象

　　这样，不用每个对象都生成一个函数对象。

复制代码
复制代码 
function get()
{
       alert(this.username + ", " + this.password);
}

//函数对象只有一份
function createObject(username, password)
{
       var object = new Object();

       object.username = username;
       object.password = password;

       object.get = get; //每一个对象的函数对象都指向同一个函数对象

       return object;
}

var object = createObject("zhangsan", "123");
var object2 = createObject("lisi", "456");

object.get();
object2.get();
复制代码
复制代码

 

　　优点：让一个函数对象被多个对象所共享，而不是每一个对象拥有一个函数对象。

　　缺点：对象和它的方法定义分开了，可能会造成误解和误用。

 

三.构造函数方式

　　改进版：加上参数：

复制代码
复制代码 
function Person(username, password)
{
       this.username = username;
       this.password = password;

       this.getInfo = function()
       {
              alert(this.username + ", " + this.password);
       }
}

var person = new Person("zhangsan", "123");
person.getInfo();
复制代码
复制代码

 

四.原型(“prototype”)方式

　　例子：

复制代码
复制代码 
function Person()
{
}

Person.prototype.username = "zhangsan";
Person.prototype.password = "123";

Person.prototype.getInfo = function()
{
       alert(this.username + ", " + this.password);
}

var person = new Person();
var person2 = new Person();

person.username = "lisi";

person.getInfo();
person2.getInfo();
复制代码
复制代码

 

　　使用原型存在的缺点：

　　1.不能传参数；

　　2.有可能会导致程序错误。

 

　　如果使用原型方式来定义对象，那么生成的所有对象会共享原型中的属性，这样一个对象改变了该属性也会反映到其他对象当中。

　　单纯使用原型方式定义对象无法在构造函数中为属性赋初值，只能在对象生成后再去改变属性值。

 

　　比如，username改为数组后：

复制代码
复制代码 
function Person()
{
}

Person.prototype.username = new Array();
Person.prototype.password = "123";

Person.prototype.getInfo = function()
{
       alert(this.username + ", " + this.password);
}

var person = new Person();
var person2 = new Person();

person.username.push("zhangsan");
person.username.push("lisi");
person.password = "456";

person.getInfo(); //输出：zhangsan,lisi, 456
person2.getInfo(); //输出：zhangsan,lisi, 123

//虽然没有对person2对象进行修改，但是它的name和person是一样的，即为zhangsan,lisi
复制代码
复制代码

 

　　这是因为使用原型方式，person和person2指向的是同一个原型，即对应了同样的属性对象。

　　对于引用类型(比如数组)，两个对象指向了同一个引用，所以对一个所做的更改会影响另一个。

　　而对于字符串(字面常量值)，重新赋值之后就指向了另一个引用，所以二者的修改互不影响。

 

对原型方式的改进：

　　使用原型+构造函数方式来定义对象，对象之间的属性互不干扰，各个对象间共享同一个方法。

复制代码
复制代码 
<script type="text/javascript">
//使用原型+构造函数方式来定义对象

function Person()
{
       this.username = new Array();
       this.password = "123";
}

Person.prototype.getInfo = function()
{
       alert(this.username + ", " + this.password);
}

var p = new Person();
var p2 = new Person();

p.username.push("zhangsan");
p2.username.push("lisi");

p.getInfo();
p2.getInfo();

</script>
复制代码
复制代码

 

 

五.动态原型方式

　　在构造函数中通过标志量让所有对象共享一个方法，而每个对象拥有自己的属性。

复制代码
复制代码 
<script type="text/javascript">

function Person()
{
       this.username = "zhangsan";
       this.password = "123";

       if(typeof Person.flag == "undefined")
       {
              //此块代码应该只在第一次调用的时候执行
              alert("invoked");

              Person.prototype.getInfo = function()
              {
                     //这个方法定义在原型中，会被每一个对象所共同拥有
                     alert(this.username + ", " + this.password);
              }

              Person.flag = true;//第一次定义完之后，之后的对象就不需要再进来这块代码了

       }
}

var p = new Person();
var p2 = new Person();

p.getInfo();
p2.getInfo();

</script>
复制代码
复制代码
 
分类:  html5基础

转载于:https://www.cnblogs.com/ordinaryk/p/6536648.html

相关文章：

  • Flex设置toolTip样式
  • fle中alert样式的设置
  • Hdu 3065 病毒侵袭持续中(AC自动机)
  • Error #2044: 未处理的 IOErrorEvent:。 text=Error #2038: 文件 I/O 错误。
  • sql server 函数详解（4）日期和时间函数
  • 【CSP】字符与int
  • flex 多文件上传
  • 网络基础
  • hibernate常见错误
  • oracle中REF Cursor用法
  • 结对作业
  • FLEX在datagrid中的itemreader中渲染combobox使用outerDocument
  • shell分库备份
  • DataGrid里嵌入checkBox，增加，删除等控件等操作
  • 最近前端面试遇到的题目
  • JavaScript-如何实现克隆(clone)函数
  • 【comparator, comparable】小总结
  • 【跃迁之路】【444天】程序员高效学习方法论探索系列（实验阶段201-2018.04.25）...
  • Idea+maven+scala构建包并在spark on yarn 运行
  • MD5加密原理解析及OC版原理实现
  • python 学习笔记 - Queue Pipes，进程间通讯
  • 给第三方使用接口的 URL 签名实现
  • 数组的操作
  • 用Visual Studio开发以太坊智能合约
  • $.ajax()
  • $jQuery 重写Alert样式方法
  • (1)Android开发优化---------UI优化
  • (js)循环条件满足时终止循环
  • （Matalb时序预测）PSO-BP粒子群算法优化BP神经网络的多维时序回归预测
  • （附源码）spring boot公选课在线选课系统 毕业设计 142011
  • （附源码）springboot 房产中介系统 毕业设计 312341
  • （论文阅读32/100）Flowing convnets for human pose estimation in videos
  • （七）c52学习之旅-中断
  • （十一）c52学习之旅-动态数码管
  • （一）ClickHouse 中的 `MaterializedMySQL` 数据库引擎的使用方法、设置、特性和限制。
  • (原創) 如何刪除Windows Live Writer留在本機的文章? (Web) (Windows Live Writer)
  • （转）GCC在C语言中内嵌汇编 asm __volatile__
  • （转载）VS2010/MFC编程入门之三十四（菜单：VS2010菜单资源详解）
  • ****Linux下Mysql的安装和配置
  • .NET 8.0 中有哪些新的变化？
  • .NET 发展历程
  • .Net 知识杂记
  • .net打印*三角形
  • /3GB和/USERVA开关
  • /usr/lib/mysql/plugin权限_给数据库增加密码策略遇到的权限问题
  • @vue/cli 3.x+引入jQuery
  • [ 常用工具篇 ] AntSword 蚁剑安装及使用详解
  • []Telit UC864E 拨号上网
  • [bzoj2957]楼房重建
  • [BZOJ4337][BJOI2015]树的同构(树的最小表示法)
  • [c]扫雷
  • [C++从入门到精通] 14.虚函数、纯虚函数和虚析构(virtual)
  • [GN] Vue3.2 快速上手 ---- 核心语法2
  • [i.MX]飞思卡尔IMX6处理器的GPIO-IOMUX_PAD说明
  • [Java] 图说 注解