Javascript对象创建

最新推荐文章于 2024-10-08 14:23:59 发布
最新推荐文章于 2024-10-08 14:23:59 发布
阅读量106 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/etoah/p/4114701.html
版权

一、概述

　　虽然对象字面量可以用来创建对象，但在创建多个类似的对象时，不够优雅，不符合DRY原则。

二、创建对象

　　有以下几种模式：

　　1.工厂模式

　　2.构造函数模式

　　3.原型模式

　　4.组合构造函数和原型模式（推荐）

5.动态原型模式　（推荐）

6.稳妥构造函数模式　

 

　　1.工厂模式　　

 

function createPerson(name,age,job)
        {
            var o={
                name:name,
                age:age,
                job:job,
                saySelf:function(){
                    console.log(this.name+this.age+this.job);
                }
            };
            return o;
        }
        var person=createPerson("我是工厂模式建的",20,"ape");
        person.saySelf();

 

优点：可创建多个相似对象。

缺点：无法识别对象。

 

 

2.构造函数模式

　　

function Person(name,age,job)
        {
            this.name=name;
            this.age=age;
            this.job=job;
            this.saySelf=function(){
                console.log(this.name+this.age+this.job);
            }
        }
        var person=new Person("构造函数模式",20,"ape");
        person.saySelf();

 

　   特点：

    1. 没有显式的创建对象，直接将属性和方法给了this;
    2. 没有return;
    3. 函数名大写，一般构造函数名大写;　　　　　　

　　　　要创建Person的实例，必须使用new操作符，Person的实例都有constructor属性，该属性指向Person();

　　　　

        console.log(person.constructor===Person)//true
        console.log(person instanceof Person) //true 推荐

 

　　　　自定义构造函数可以标识为一种特定类型。

　　　　任何函数，只要通过new调用，就可以当作构造函数，构造函数与普通函数没什么两样。

　　　　优点：可识别类型。

　　　　缺点：每个方法要在每个实例上重建一遍，工厂模式也有此类问题。

console.log(person.saySelf===person2.saySelf);//false

 

 

　　3.原型模式

 

　　　　

    (function(){
        function Person()
        {
        }
        Person.prototype.name='原型模式';
        Person.prototype.age='28';
        Person.prototype.job='Ape';
        Person.prototype.saySelf=function(count){
            if(count)
            console.log(count+":"+this.name+this.age+this.job);
            else
              console.log(this.name+this.age+this.job);
        }
        var person=new Person();
        var person2=new Person();
        person.saySelf();
        person2.saySelf();
        console.log(1,person.saySelf===person2.saySelf);//true
        console.log(2,Person.prototype.isPrototypeOf(person));//true
        console.log(3,Object.prototype.isPrototypeOf(person));//true
        console.log(4,Object.getPrototypeOf(person)===Person.prototype);//true
        console.log(8,person.name);
        person.name="看看变不变";
        person.saySelf(9);//9:看看变不变28Ape
        person2.saySelf(10);//10:原型模式28Ape

        delete person.name;
        person.saySelf(11);//11:原型模式28Ape
        person.__proto__.name="现在肯定变了";
        person2.saySelf();//现在肯定变了28Ape  只在Firefox、Safari、Chrome中有效
    })();

 

当添加一个属性时，这个属性就会屏蔽原型对象的同名属性。但是可以通过delete删除实例属性，让实例重新可以访问这个属性。说话是苍白的，看上面代码。

通过hasOwnProperty()可判断属性是否是实例自己的属性（区别于从原型上继承来的）。

 

        console.log(person.hasOwnProperty("name"));//true
        delete person.name;
        console.log(person.hasOwnProperty("name"));//false

 

那么，怎么检测某个属性是否是实例的属性呢，用in操作符，无论属性在实例中还是在原型中，都返回true

 

        console.log("in","name" in person);//true
        delete person.name;
        console.log("in","name" in person);//true

 　　　　可用Object.keys()方法，返加一个所有可枚举属性的的字符串数组。

　　　　如果想得到，全部的属性可用Object.getOwnPropertyNames();

　　　　两个方法的共同点：均列举出自有属性，不查找原型链;

　　　　　　　　   不同点：Object.keys()方法返回可枚举属性，Object.getOwnPropertyNames()返回所有属性的keys。

 

        person2.sex="男";
        console.log(Object.keys(Person.prototype).join(";"));//name;age;job;saySelf
        console.log(Object.getOwnPropertyNames(Person.prototype).join(";"));//constructor;name;age;job;saySelf
        console.log(Object.keys(person2).join(";"));//sex
        console.log(Object.getOwnPropertyNames(person2).join(";"));//sex

 

 

　　　　原型的动态性，这个很好理解，原型只是引用用，动态添加，当然可用。

　　　　但是，实例化一个对象后，再去重写一个原型，实例仍然指向原来的原型。

 //原型的动态性
    (function(){
        function Person()
        {
        }
        Person.prototype.name='原型模式';
        Person.prototype.age='28';
        Person.prototype.job='Ape';
        Person.prototype.saySelf=function(count){
            if(count)
                console.log(count+":"+this.name+this.age+this.job);
            else
                console.log(this.name+this.age+this.job);
        }
        var person=new Person();
        console.log(Object.getOwnPropertyNames(person.__proto__).join(";"));
        Person.prototype={
            constructor:Person,
            sex:"汉子"
        }
        var person2=new Person();
        console.log(Object.getOwnPropertyNames(person.__proto__).join(";"));
        console.log(Object.getOwnPropertyNames(person2.__proto__).join(";"));
    })();
View Code

 

　　

　　优点：共享方法，可用isPrototypeOf检测是否是原型，在ES5中，可用getPrototypeOf得到原型。

　　缺点：不能拥有自己的属性。这个致命的缺点导致基本没有人用原型模式。

 

 

4.组合构造函数和原型模式。

 

function Person(name,age,job)
        {
            this.name=name;
            this.age=age;
            this.job=job;
        }
        Person.prototype={
            constructor:Person,
            saySelf:function()
            {
                console.log(this.name+this.age+this.job);
             }
        };
        Person.static=function()
        {
            console.log("这是一个静态方法");
        }
        var person=new Person();
        Person.static();//这是一个静态方法
        person.static();//Uncaught TypeError: undefined is not a function

 

 　　　　这个模式解决了以上所有的缺点，同时具有以上所有的优点，是在javascript应用最广泛的创建自己定义类型的方法。是用来定义定义引用类型的一种默认模式。

 

 

　　5.动态原型模式　

 

    //动态原型模式
    (function(){
        function Person(name,age,job)
        {
            this.name=name;
            this.age=age;
            this.job=job;
            if(typeof this.saySelf!=="function") {
                Person.prototype.saySelf = function ()
                {
                    console.log(this.name + this.age + this.job);
                }
　　　　　　　　　
            }
        }

        var person=new Person("工厂模式",20,"frontEndpe");
        var person2=new Person("工厂模式Ac",20,"frontEndApe");
        person.saySelf();
        person2.saySelf();
    })();

 

优点：把原型封装构造函数中。

缺点：每个实例化都进行一次判断（这个也不算什么）。

 

 

　　6.稳妥构造函数模式　　

 

    //稳妥构造函数模式
    (function(){
        function Person(name)
        {
            var o={};
            //可以添加私有的方法和变量
            o.sayName=function()
            {
                console.log(name);
            }
            return o;
        }

        var person=Person("工厂模式");
        var person2=Person("工厂模式Ac");
        person.sayName();
        person2.sayName();
        var say=person2.sayName;
        say();

    })();

 

稳妥对象：没有公共属性的对象。

name属性只有sayName()闭包访问

三、总结

　　综合以上，推荐使用 4.组合构造函数和原型模式和5.动态原型模式。

　　它们都有以下优点：

　　1.都可以识别对象 。

　　2.都可以有自己的属性值（constructor） 和共享的属性（prototype）

 

 

四、代码

 

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
"use strict";
(function(){
    // 工厂模式
    (function(){
        function createPerson(name,age,job)
        {
            var o={
                name:name,
                age:age,
                job:job,
                saySelf:function(){
                    console.log(this.name+this.age+this.job);
                }
            };
            return o;
        }
        var person=createPerson("工厂模式",20,"ape");
        var person2=createPerson("工厂模式2",20,"ape");
        console.log(person.saySelf===person2.saySelf);
        person.saySelf();
    });//();
    // 构造函数模式
    (function(){
        function Person(name,age,job)
        {
            this.name=name;
            this.age=age;
            this.job=job;
            this.saySelf=function(){
                console.log(this.name+this.age+this.job);
            }
        }
        var person=new Person("构造函数模式",20,"ape");
        var person2=new Person("构造函数模式2",20,"ape");
        person.saySelf();
        console.log(person.constructor===Person);//true
        console.log(person instanceof Person); //true 推荐
        console.log(person.saySelf===person2.saySelf);//false
    });//();
    //原型模式
    (function(){
        function Person()
        {
        }
        Person.prototype.name='原型模式';
        Person.prototype.age='28';
        Person.prototype.job='Ape';
        Person.prototype.saySelf=function(count){
            if(count)
            console.log(count+":"+this.name+this.age+this.job);
            else
              console.log(this.name+this.age+this.job);
        }
        var person=new Person();
        var person2=new Person();
        person.saySelf();
        person2.saySelf();
        console.log(1,person.saySelf===person2.saySelf);//true
        console.log(2,Person.prototype.isPrototypeOf(person));//true
        console.log(3,Object.prototype.isPrototypeOf(person));//true
        console.log(4,Object.getPrototypeOf(person)===Person.prototype);//true
        console.log(5,person.name);
        person.name="看看变不变";
        person.saySelf(9);//9:看看变不变28Ape
        person2.saySelf(10);//10:原型模式28Ape
        console.log(person.hasOwnProperty("name"));//true
        console.log("in","name" in person);//true
        delete person.name;
        console.log("in","name" in person);//true
        console.log(person.hasOwnProperty("name"));//false
        person.saySelf(11);//11:原型模式28Ape
        person.__proto__.name="现在肯定变了";
        person2.saySelf();//现在肯定变了28Ape  只在Firefox、Safari、Chrome中有效
        person2.sex="男";
        console.log(Object.keys(Person.prototype).join(";"));//name;age;job;saySelf
        console.log(Object.getOwnPropertyNames(Person.prototype).join(";"));//constructor;name;age;job;saySelf
        console.log(Object.keys(person2).join(";"));//sex
        console.log(Object.getOwnPropertyNames(person2).join(";"));//sex
    });//();
    //原型的动态性
    (function(){
        function Person()
        {
        }
        Person.prototype.name='原型模式';
        Person.prototype.age='28';
        Person.prototype.job='Ape';
        Person.prototype.saySelf=function(count){
            if(count)
                console.log(count+":"+this.name+this.age+this.job);
            else
                console.log(this.name+this.age+this.job);
        }
        var person=new Person();
        console.log(Object.getOwnPropertyNames(person.__proto__).join(";"));
        Person.prototype={
            constructor:Person,
            sex:"汉子"
        }
        var person2=new Person();
        console.log(Object.getOwnPropertyNames(person.__proto__).join(";"));
        console.log(Object.getOwnPropertyNames(person2.__proto__).join(";"));
    });//();
    //组合构造函数和原型模式。 最常用
    (function(){
        function Person(name,age,job)
        {
            this.name=name;
            this.age=age;
            this.job=job;
        }
        Person.prototype={
            constructor:Person,
            saySelf:function()
            {
                console.log(this.name+this.age+this.job);
             }
        };
        Person.static=function()
        {
            console.log("这是一个静态方法");
        }
        var person=new Person();
        Person.static();//这是一个静态方法
        person.static();//Uncaught TypeError: undefined is not a function
    });//();
    //动态原型模式
    (function(){
        function Person(name,age,job)
        {
            this.name=name;
            this.age=age;
            this.job=job;
            if(typeof this.saySelf!=="function") {
                Person.prototype.saySelf = function ()
                {
                    console.log(this.name + this.age + this.job);
                }

            }
        }

        var person=new Person("工厂模式",20,"frontEndpe");
        var person2=new Person("工厂模式Ac",20,"frontEndApe");
        person.saySelf();
        person2.saySelf();
    });//();
    //稳妥构造函数模式
    (function(){
        function Person(name)
        {
            var o={};
            //可以添加私有的方法和变量
            o.sayName=function()
            {
                console.log(name);
            }
            return o;
        }

        var person=Person("工厂模式");
        var person2=Person("工厂模式Ac");
        person.sayName();
        person2.sayName();
        var say=person2.sayName;
        say();
    });//();
})();
</script>
</body>
</html>
View Code

 

 

转载于:https://www.cnblogs.com/etoah/p/4114701.html

denglei011124
关注
JavaScript对象创建模式实例汇总
10-21
主要介绍了JavaScript对象创建模式,结合实例形式总结分析了JavaScript常见的对象创建模式,包括工厂模式、构造函数模式、原型模式、动态原型模式、寄生构造函数模式、稳妥构造函数模式等,需要的朋友可以参考下
javascript对象创建
03-19
这个文件可能包含了一些示例代码，用于演示上述的JavaScript对象创建、类定义和继承的实践。通过查看和运行这些代码，你可以更好地理解这些概念并应用到实际项目中。 总结来说，JavaScript对象创建涉及字面量、构造...
JavaScript对象创建总结
04-15
javascript对象创建方法总结，通过这些方法的总结，可以对对象有了更深一步的了解，也加深了对对象的巩固认识。
JavaScript 创建对象
10-29
JavaScript 创建对象是编程中至关重要的概念，特别是在动态类型的JavaScript中，理解不同的创建方式能帮助开发者更高效地构建和管理程序结构。以下将详细介绍几种常见的JavaScript创建对象的方法。 1. JSON方式/...
JavaScript对象创建及继承原理实例解剖
10-27
对象创建和继承是JavaScript中非常重要的概念，这里我们将深入理解这两个主题。 首先，我们来看对象的创建。在JavaScript中，对象通常是通过函数来创建的。每个函数都是一个特殊的对象，它们都有一个内置的`...
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 1042
Vue 2 中使用 Vue I18n 插件实现中英文切换
【Vue】a-radio-group单选框数字与字符串回显问题
叶为正的博客
10-08 52
根据后端接口返回数字或字符串，来配置Ant Design of Vue中a-radio-group单选框的回显问题，注意value中的取值是不一样的。
JavaScript ArrayBuffer的读写与类型转换
白瑕 的博客
10-01 492
所有视图的基本单位是ArrayBuffer, ArrayBuffer中只存储二进制格式的数据.ArrayBuffer不可直接读写, 必须通过视图(比如DataView)暴露的API.
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞
2301_77012231的博客
10-01 625
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞，攻击者可以获取服务器权限。bp 报错泄露绝对路径。sqlmap确认有漏洞。
vue-live2d看板娘集成方案设计使用教程
每个人都是独一无二的，把握好自己的节奏，跟着自己的心走。
10-05 1273
vue-live2d看板娘集成方案设计使用教程
Puppeteer自动化：使用JavaScript定制PDF下载
最新发布
ip16yun的博客
10-08 423
Puppeteer 是一个强大的Node.js库，提供了对无头Chrome或Chromium的控制，可以用于生成网页快照、抓取数据、自动化测试等任务。其中，生成PDF文件是一个常见的需求，本文将通过使用Puppeteer展示如何自动化生成定制的PDF，并使用代理IP、设置user-agent、cookie等技术来增强自动化过程的灵活性与稳定性。为了更好地理解如何定制Puppeteer生成的PDF文件，我们提供一个生成A4纸张格式的网页PDF的实例。用户可以根据需求自定义输出的PDF格式或内容。
Webpack 打包后文件过大，如何优化？
官方推荐
09-30 6058
Webpack 打包后文件过大，如何优化？
如何使用Redisson的布隆过滤器？
付聪
10-02 476
【代码】如何使用Redisson的布隆过滤器？
Web认识 -- 第一课
ZxVSaccount的博客
09-30 1232
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
解决IE中a标签中的图片有边框
weixin_41674235的博客
10-08 78
‌1、通过CSS去除边框‌：在CSS中为img标签添加border:0 none;样式，例如：img{border:0 none;这种方法适用于大多数现代浏览器‌12。3‌、通过JavaScript去除点击后的虚线框‌：在a标签中添加outline:none;和text-decoration:none;这可以同时去除点击后的虚线框和下划线‌。
Vue3实现mqtt的订阅与发布
徐三岁的博客
09-30 560
MQTT（Message Queuing Telemetry Transport）是一种轻量级的、基于发布/订阅模式的通信协议，通常用于连接物联网设备和应用程序之间的通信。它最初由IBM开发，现在由OASIS（Organization for the Advancement of Structured Information Standards）进行标准化。MQTT的工作原理：它采用发布/订阅模式，其中设备（称为客户端）可以发布消息到特定的主题（topics），而其他设备可以订阅这些主题以接收消息。
React响应式修改数组和对象
警警的博客
09-30 935
React的状态是不可变的，这意味着你不能直接修改状态对象中的数组元素，而是需要创建一个新的数组来更新状态。你不能直接修改对象中的属性，而是需要创建一个新的对象来更新状态。不可变性（Immutability）：React中的状态是不可变的，这意味着你不能直接修改状态对象中的数组元素，而是需要创建一个新的数组来更新状态。避免直接修改状态：React的状态是不可变的，直接修改状态（如this.state.items.push(4)）不会触发重新渲染，因为React无法检测到这种变化。// 修改name属性。
深入解析 JavaScript 中的普通函数与箭头函数：区别、适用场景与最佳实践
qq_22841387的博客
10-02 1156
在函数式编程的支持上，箭头函数作为 ES6 新引入的一种更为简洁的函数形式，极大地方便了开发者编写简洁高效的代码。然而，箭头函数的行为与传统的普通函数有所不同，尤其是在 this。普通函数在定义时，尤其是带有单行返回值的情况下，显得略微冗长。无论是全局调用、作为对象方法调用，还是在事件处理函数中调用，动态变化的场景，比如回调函数，尤其是在类方法中作为回调传递时，箭头函数避免了手动绑定。在回调函数、数组操作等场景中，箭头函数的简洁性尤为明显。在定义对象的方法时，箭头函数由于不绑定自己的。
【JAVA开源】基于Vue和SpringBoot的洗衣店订单管理系统
杨荧的CSDN博客
10-06 987
本文介绍了洗衣店订单管理系统的开发全过程。通过分析企业对于洗衣店订单管理系统的需求，创建了一个计算机管理洗衣店订单管理系统的方案。文章介绍了洗衣店订单管理系统的系统分析部分，包括可行性分析等，系统设计部分主要介绍了系统功能设计和数据库设计。
JavaScript对象创建全解析
"JavaScript对象创建总结" 在JavaScript中，创建对象是进行面向对象编程的基础，本文将总结几种常见的创建对象的方法。 1. 调用系统内置的构造函数创建对象 JavaScript内置了一个`Object`构造函数，它可以用来创建...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值