js创建模式

news/2024/7/19 15:24:20 标签: js, 设计模式, javascript

工厂模式

javascript">    function createPerson(name, age, job) {
        var o = new Object();
        o.name = name;
        o.age = age;
        o.job = job;

        o.sayName = function () {
            alert(this.name);
        }

        return o;
    }

    var p1 = createPerson('zed', 18, 'Doctor');
    var p2 = createPerson('ls', 19, 'Engineer');

    p1.sayName()
    p2.sayName()

    console.log(p1)
    console.log(p2)

这个模式虽然能够很方便的创建多个相似的对象,但却有个很大的问题,即对象无法识别类型,这就引出了构造函数模式

构造函数模式

javascript">    function Person(name, age, job) {
        this.name = name;
        this.age = age;
        this.job = job;

        this.sayName = function () {
            alert(this.name);
        }
    }

    var p1 = new Person('zed', 18, 'Doctor');
    var p2 = new Person('ls', 19, 'Engineer');

    p1.sayName()
    p2.sayName()

    console.log(p1)
    console.log(p2)

以此模式创建对象,必须使用new操作符。p1和p2中分别保存着Person的两个实例对象。这两个对象都有一个属性constructor,指向Person。

javascript">    console.log(p1.constructor)//ƒ Person(name, age, job) {...}
    console.log(p1.constructor === p2.constructor)//true

此模式创建的对象类型,是可识别的。

javascript">    console.log(typeof p1)//object
    console.log(p1 instanceof Person)//true
    console.log(p2 instanceof Person)//true

此模式大大补足了工厂模式的弊端,但是也不是完美的。

javascript">    console.log(p1.sayName===p2.sayName)//false

以此模式创建的对象,所有对象中的公共方法并不是真正意义上的共享。别忘了函数也是对象,构造函数会为每个对象分别创建一个同名函数,即使他们的作用完全相同。

这么做的话,每个函数都要在每个实例对象上重新创建一遍,会浪费很多内存空间。这可不是我们想要的。这也就引出了接下来的原型模式

原型模式

javascript">    function Person() {
    }

    Person.prototype.name = 'zed';
    Person.prototype.age = 18;
    Person.prototype.job = 'Doctor';
    Person.prototype.sayName = function () {
        alert(this.name);
    }

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

    console.log(p1)
    console.log(p2)

如果把属性和函数,挂载到对象的原型对象上,那么就可实现真正意义的共享。

javascript">    console.log(p1.sayName===p2.sayName)//true
  • 原型对象。我们创建的每个对象,都有一个prototype属性,这个属性会指向一个对象,这个对象包含着特定类型的所有实例对象共享的属性和方法。这个对象就叫做原型对象。
  • 原型对象都会自动获得一个constructor属性,这个属性指向prototyoe所在的函数。
  • 在使用构造函数创建一个实例后,每个实例都会有一个__proto__属性,它指向原型对象。
  • 创建的实例本身没有属性和方法,但是是可以调用,访问的。这是通过查找对象属性的过程实现的。
  • 查找对象属性
    • 当我们访问某个属性时,会先寻找实例对象本身开始。如果在实例对象中找到指定的属性,则会返回;如果没有,会继续搜索__proto__指向的原型对象,有则返回。
      在这里插入图片描述
  • 更简单地原型语法
javascript">    function Person() {
    }

    Person.prototype = {
        constructor: Person,
        name: 'zed',
        age: 18,
        job: 'Doctor',
        sayName: function () {
            alert(this.name);
        }
    };


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

    console.log(p1)
    console.log(p2)

http://www.niftyadmin.cn/n/1257980.html

相关文章

Codeforces Round #409 (Div. 2) D Volatile Kite

题意:给一个凸多边形(顺时针方向),对每个点任意移动距离D,求最大的D使得这个多边形一直是凸多边形。 思路:容易发现对于凸多边形相邻的三个点。。pi,pi1,pi2。。pi1到直线pi,pi2的距离除以2就是这组点所能接受的最大值。这n组点的…

【计算机】基本概念的理解 —— 沙盒(sandbox)、交互式计算/编程/应用

web scraper:网络铲; scraper:n. 刮刀;铲土机;守财奴;1. 交互式计算/编程/应用(interactive computing/application/programming) 交互式计算(有时也叫交互式应用&#x…

springboot+thymeleaf 东软医疗项目 开发错误记录

学校的一个实训要求用springboot 开发,作为第一次接触该框架的前端人儿来说,是个挑战。 也做了半个月了,项目还有一半大概。笔者决定再此记录开发中遇到的错误,同大伙分享的同时,也告诫自己不要再犯。 后端我之前用no…

CentOS 7 服务器配置--安装CentOS 7

看博客园也有几年的时间了,这是第一次鼓足勇气发一下我自己的博客,不为了别的,只是最近打算学习Linux的服务器配置,就写几篇博文把我学的一点点的记录下来,方便以后自己回顾学习。 今天就先记录下我安装CentOS 7的过程…

在Vue cli3 中使用Element-UI

1.创建cli3项目并cd到该目录 $ vue create demo $ cd demo2.在项目中添加ElementUI 第一种方式 $ npm i element-ui -S下载完成后,在main.js中配置: import ElementUI from element-ui import element-ui/lib/theme-chalk/index.cssVue.use(ElementU…

我的微信公众号项目

微信公众号加上 web 端。 微信功能:处理各种微信推送事件的逻辑:比如关注、取消关注、通过推荐人关注、解析文本、分享到朋友圈、微信支付等 其他主要功能:多账号系统、流量充值、积分系统、卡券系统、大转盘、拼图游戏。 熟悉了微信公众号的…

Vue+Springboot+MySQL 实现分页

自己想的一个分页的逻辑&#xff0c;分享给大家。 Vue部分 <template><div><el-table:data"tableData"stripestyle"width: 100%"><el-table-columnprop"userName"label"用户名"width"180"></…

aixos post请求 参数传递失败

最近使用Vue和Springboot做一个项目&#xff0c;需要添加一个User&#xff0c;从前端表单发起axios的post请求&#xff0c;然后发现了这个很折磨的错误。 问题 Vue部分 Springboot部分 发送的数据是&#xff1a; 结果&#xff0c;debug显示&#xff1a; 也就是说所有的参数…