<笔记>面向对象的设计模式

最新推荐文章于 2024-09-21 09:47:19 发布
最新推荐文章于 2024-09-21 09:47:19 发布
阅读量51 收藏
点赞数
文章标签： 设计模式 javascript ViewUI
原文链接：https://segmentfault.com/a/1190000016039854
版权

创建对象

什么是工厂模式 ?

封装一个函数 , 用来创建对象并给对象中特定的属性添加值 , 优点是可以循环调用 , 缺点是每一个创建出来的对象都是独立的 , 不能确定它是哪个类型的对象 ( 或者说是想要将哪个对象作为模板进行创建 )

function func(name, age) {
    var o = {
        "name" : name,
        "age" : age
    };
    return o;
}
var person = func("oswald", 24);
var person2 = func("oswald", 24);
// {name: "oswald", age: 24}
console.log(person === person2);
// false
console.log(person.__proto__ === Object.prototype);     // true
console.log(person2.__proto__ === Object.prototype);    // true
// 每个对象都是独立的并且指向 Object.prototype 的 , 不能辨别基于哪个对象为原型

什么是构造函数模式

构造函数模式和工厂模式的区别

构造函数模式就是通过构造函数来创建自定义类型的对象 , 创建出来的对象都指向了同一个构造函数的 prototype , 解决了工厂模式中不能识别对象模板的问题

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayName = function(){
        console.log(this.name);
    };
    /*  没有显式的创建对象
        用 this 代替新对象
        没有 return 语句    */
}
var person1 = new Person("oswald", 24);
console.log(person1);    // {name: "oswald", age: 24}
console.log(person1.__proto__ === Person.prototype);    // true
// person1 指向了 构造函数 func.prototype
console.log(person1 instanceof Person);     // true
// person1 对象是构造函数 Person ( 也可以叫做 Person 类型 ) 的实例
console.log(person1 instanceof Object);     // true
// person1 对象也是 Object 类型的实例
构造函数模式的缺点

但是 , 上面的构造函数模式也不是没有缺点的 : 单纯的构造函数模式创建对象的时候 , 对象中每个方法都会在实例对象上重新创建一次 , 也就是说每次都会创建一个看起来相同但是完全不是一个"方法"的方法

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayName = function(){
        console.log(this.name);
    };
}
var person1 = new Person("oswald", 24);
var person2 = new Person("oswald", 24);
console.log(person1.sayName = person2.sayName);     // false
// 每次创建对象的时候 , 都会生成一个功能一样但是是不同 Function 实例的方法

什么是原型模式

  • 每个函数在创建的时候都会有一个 prototype 属性 , 这个属性指向一个对象
  • 所有以这个函数为构造函数创建的实例对象 , 都会连接到构造函数的 prototype 属性指向的这个对象上 , 并且可以访问这个对象的所有属性和方法 , 这个对象就叫做原型对象
  • 原型对象在创建的时候自带一个不可枚举的 constructor 属性 , 指向构造函数
function Person(){
    Person.prototype.name = "oswald";
    Person.prototype.age = 24;
    Person.prototype.sayName = function(){
        console.log(this.name);
    };
}

var person1 = new Person();
console.log(person1);
// {} 得到一个空对象 , 因为创建的属性和方法都在实例的原型对象上
console.log(Person.prototype);
// {name: "oswald", age: 24, sayName: f(...)}
console.log(person1.name);
// oswald 得到一个名字 , 因为实例对象可以从它的原型对象上查找属性和方法

var person2 = new Person();
console.log(person2.sayName === person1.sayName);   // true
// person1 和 person2 访问的 sayName 方法都是原型对象上的方法 , 不是它们自身的 , 这样就解决了构造函数模式多次创建方法实例的缺点
原型对象中的属性和方法会和实例对象自有的冲突吗

如果当前实例对象中已经有了想要查找的属性和方法 , 会直接使用实例对象的属性和方法 , 如果没有才去原型对象中查找

function Person(){
    Person.prototype.name = "oswald";
    Person.prototype.age = 24;
}
var person1 = new Person();
console.log(person1.name);  // oswald
person1.name = "yin";
console.log(person1.name);  // yin
实例对象怎么访问原型对象
  • 在火狐、谷歌等浏览器中提供了一个 __proto__ 的属性 , 可以访问它的原型对象
  • ECMAScript 5 中提供了 Object.getPrototypeOf( ) 方法可以检测并返回它的原型对象
function Person(){
    Person.prototype.name = "oswald";
    Person.prototype.age = 24;
}
var person1 = new Person();
console.log(person1.__proto__ === Person.prototype);
// true
console.log(Object.getPrototypeOf(person1) === Person.prototype);
// true
原型对象和原型属性有什么区别
  • 实例对象 ( person1 ) 的原型对象 ( __proto__ ) 是创建当前对象的构造函数 ( Person ) 的原型属性 ( prototype ) , 个人用来区别访问途径 , 便于理解
function Person(){
    Person.prototype.name = "oswald";
    Person.prototype.age = 24;
}
var person1 = new Person();
console.log(person1.__proto__ === Person.prototype);
// true
  • 实例对象可以查找它的原型对象 , 但是不能查找它自己的原型属性
function Person(){
}
var person1 = new Person();
person1.prototype = {
    name: "yin",
    age: 23
}
console.log(person1.name);  // undefined
怎么检测属性或者方法在实例对象中是否存在

使用继承自 Object 对象的 hasOwnProperty( ) 方法可以检车要查找的属性或方法是否来自实例对象而不是实例对象的原型对象

function Person(){
    Person.prototype.name = "oswald";
    Person.prototype.age = 24;
}
var person1 = new Person();
console.log(person1.name);  // oswald
console.log(person1.hasOwnProperty("name"));
// false 当前查找到的 name 属性来自原型对象
person1.name = "yin";
console.log(person1.name);  // yin
console.log(person1.hasOwnProperty("name"));
// true 当前查找到的 name 属性来自实例对象

枚举对象中的属性和方法有哪些方法

  • for - in 遍历 , 会将当前对象和当前对象的原型对象上所有可以枚举的属性和方法都返回
function Person(){
    Person.prototype.name = "oswald";
    Person.prototype.age = 24;
}
var person1 = new Person();
person1.color = "red";
for( poop in person1 ){
    console.log(poop);
    // color, name, age
}
  • ECMAScript 5 的 Object.key( ) 方法 , 遍历当前对象的可枚举属性和方法 , 不会去找原型对象
function Person(){
    Person.prototype.name = "oswald";
    Person.prototype.age = 24;
}
var person1 = new Person();
person1.color = "red";
var p1keys = Object.key(person1);
console.log(p1keys);    // color
  • Object.getOwnPropertyNames( ) 方法 , 遍历当前对象的所有属性和方法 , 包括不可枚举的 , 不会去找原型对象
function Person(){
    Person.prototype.name = "oswald";
    Person.prototype.age = 24;
}
var person1 = new Person();
person1.color = "red";
var p1keys = Object.getOwnPropertyNames(person1);
console.log(p1keys);
// color
var Ppkeys = Object.getOwnPropertyNames(Person.prototype);
console.log(Ppkeys);
// constructor、name、age
原型模式创建对象的缺点

原型中的所有属性和方法都是共享的 , 如果有多个实例 , 通过其中一个实例改变原型对象中的属性和方法 , 其他实例访问的属性会跟着改变

组合使用构造函数模式和原型模式

将对象的私有属性和方法通过构造函数模式创建 , 将对象的公共属性和方法通过原型模式创建

function Person(name,age){
    /* 私有属性 */
    this.name = name;
    this.age = age;
}
Person.prototype.sayName = function(){
    /* 公共方法 */
    console.log(this.name);
}
var person1 = new Person("oswald", 24);
person1.sayName();  // oswald

继承

什么是原型链

原型链就是连接实例对象和原型对象的链接

/* 一般函数的原型链 */
function func(){
    console.log(123);
}

console.log(func.__proto__);    // Function.prototype
// func 函数是 Function 构造函数的实例对象
console.log(func.__proto__.__proto__);  // Object.prototype
// func 函数的原型对象是 Object 构造函数的实例对象
console.log(func.__proto__.__proto__.proto__);  // null
// 这里就是原型链的头了 , 所有原型链查到 Object.prototype 再往上就会返回 null

/* 一般构造函数的原型链 */
function Obj(){
    Func.prototype.name = "oswald";
}
var obj = new Obj();
console.log(obj);    // {}
console.log(obj.name);    // oswald
// obj 对象通过原型链查找到了 name 属性
console.log(Obj.__proto__);    // Obj.prototype
// obj 对象是 Obj 构造函数的实例对象
console.log(Obj.__proto__.__proto__);    // Object.prototype
// obj 对象的原型对象是 Object 构造函数的实例
console.log(Obj.__proto__.__proto__.__proto__);    // null
// 到头了

原型链继承

原型链继承的原理就是实例对象可以访问原型对象的属性和方法 , 并通过原型链向上查找

function Oswald(){
    this.color = "red";
    Oswald.prototype.sayName = function(){
        console.log(this.name)
    };
}
var oswald = new Oswald();

function Yin(name, age){
    this.name = name;
    this.age = age;
    Yin.prototype.sayAge = function(){
        console.log(this.age);
    }
}
Yin.prototype = oswald;
/*
原型链继承的核心 , 把父类型 ( Oswald ) 的实例对象 ( oswald )
设置为子类型 ( Yin ) 的原型属性 ( Yin.prototype )
*/

var yin = new Yin("oswald", 24);
// 必须要先继承再创建实例 , 否则会出现 Yin.prototype != yin.__proto__ 的情况

yin.sayName();    // oswald  继承了 Oswald 类型原型上的方法
yin.sayAge();     // 24      继承了 Yin 类型原型上的方法

借用构造函数式继承

  • 我们之前讨论的原型链继承 , 不能在创建子类型的实例对象的时候 , 给父类型的构造函数传递参数 , 如果要给父类型的构造函数传递参数 , 就会影响所有的子类型实例对象
  • 如果我们想要解决这个问题 , 可以借调父类型的构造函数 , 在新创建的对象上执行构造函数
function Oswald(color){
    this.color = color;
    this.sayName = function(){
        console.log(this.name)
    };
}

function Yin(name, age, color){
    Oswald.call(this, color);
    // 在 Yin 构造函数创建的新对象中调用 Oswald 函数
    this.name = name;
    this.age = age;
}

var yin = new Yin("yin", 24, "red");

yin.sayName();      // yin

组合式继承

但是借用构造函数继承只能够继承父类型自己的属性和方法 , 不能继承原型链上 , 这个时候我们可以使用原型链和借用构造函数的组合式继承 , 但是这个方法会调用两次父类型构造函数

function Super(color){
    this.color = color;
    // 自己的属性
    Super.prototype.sayName = function(){
        console.log(this.name)
    };
    // 原型链上的方法
}

function Sub(name, age, color){
    Super.call(this, color);        // 第二次调用 Super , 被当做普通函数调用
    // 继承 Super 构造函数自己的属性和方法
    this.name = name;
    this.age = age;
}
Sub.prototype = new Super();        // 第一次调用 Super , 被当做构造函数调用
// 继承 Super 原型链上的属性和方法
var yin = new Sub("yin", 24, "red");

yin.sayName();      // yin

原型式继承

ES 5 中使用 Object.create( o ) 方法规范了原型式继承 , 这个方法会返回一个新对象 , 新对象的原型对象指向传入的参数对象 o

function obj(o){    // Object.create( ) 方法的原理
    function F(){};
    F.prototype = o;
    return new F();
}
var person = {
    name: "oswald",
    color: ["red"]
}

var person1 = obj(person);
var person2 = Object.create(person);

console.log(person1 === person2);   // false
console.log(person1.__proto__ === person2.__proto__);   // true

寄生组合式继承

目前最优的继承模式

function Super(color){
    this.color = color;
    Super.prototype.sayName = function(){
        console.log(this.name);
    }
}
function Sub(name, color){
    Super.call(this, color);
    // 借调 Super 构造函数继承实例属性
    this.name = name;
}

var F = Object.create(Super.prototype);
F.constructor = Sub;
Sub.prototype = F;


var yin = new Sub("oswald","red");

yin.sayName();      // oswald
weixin_34101784
关注
软件设计师笔记（面向对象---设计模式）
m0_58342134的博客
08-09 2667
软件设计师笔记（面向对象---设计模式）
【愚公系列】软考中级-软件设计师 051-面向对象技术（设计模式-结构型）
时光隧道
01-27 5万+
设计模式是在软件设计领域中，为解决常见问题而被反复使用、被广泛认可的一种设计思想。它是一种经过实践验证的，被认为是最佳解决方案的经验总结，可以帮助开发人员快速高效地解决软件设计中的一些固有问题。每一个设计模式描述了一个在我们周围不断重复发生的问题，以及该问题的解决方案的核心。这样，你就能一次又一次地使用该方案而不必做重复劳动。设计模式的核心在于提供了相关问题的解决方案，使得人们可以更加简单方便的复用成功的设计和体系结构。特点描述在特定情况下被使用。
《设计模式：可复用面向对象软件的基础》——面向对象设计原则、创建型模式（笔记）
weixin_46949627的博客
10-12 1723
《设计模式：可复用面向对象软件的基础》 抽象工厂、工厂方法、生成器部分
<<设计模式-可复用面向对象软件的基础>>读书笔记
有酒平步上青天
06-25 1935
设计模式有多重要，每个做开发的人都清楚。弄清楚设计模式很难，能熟练运用就更难了。读别人的代码是 一件很享受的事情，因为可以挑比人代码的不足，从而产生优越感。但是，如果你突然发现别人的代码写的特别好，有好多东西看不明白。找不到具体实现，找不到调用位置的时候，你会很尴尬的。人家代码封装的太好了，我们需要学习了，来学习他的代码，学习他的抽象思维。起初，我写代码，都是连在一起的，一个类我写过一万多行的，一
面向对象的程序设计读书笔记
偶尔记录的一些学习笔记
10-17 2764
程序开发中面向对象的一些相关的读书笔记。面向对象概念相关 面向对象的三大特性：继承、封装和多态。继承，共性放到父类，特性放到子类。封装，对象有一个明确的边界，声明公开，实现隐藏，实现的更改，对对象的使用没有影响。多态，子类的对象可以放到父类的引用中，子类的方法可以覆盖父类的公有非final、或者protected方法。方法可以同名重载。每个对象都包含它能进行操作所需要的所有信息，这个特性称为封装，因
《大话设计模式》笔记
庭前云落的博客
06-22 2009
“策略模式还有些什么优点？
设计模式之代理模式分析使用
热门推荐
张彦峰的博客
05-21 164万+
代理模式原理和使用分析总结
《Java面向对象程序设计》学习笔记
weixin_45940369的博客
07-31 8412
备考某学校的 817程序设计Java 专业课，在学习耿祥义老师的《Java面向对象程序设计（第3版）-微课视频版》。 发一些自己的学习笔记到专栏（一篇文章对应书上一章），可能不会及时更新，见谅。 笔记可能有错误，看看就得，现在懒得浓缩精炼了，以后再说吧🧐
面向对象设计模式学习笔记：基本原则&23种设计模式优缺点分析及常用场景
wzk！
07-09 4305
design-patterns 主要参考：图说设计模式 文章目录面向对象设计模式的六大原则创建型模式1. 简单工厂模式4简单工厂模式的主要优缺点简单工厂模式的应用场景2. 工厂方法模式5工厂模式的主要优缺点：工厂模式的主要应用场景3. 抽象工厂模式5抽象工厂模式的主要优缺点：抽象工厂模式的主要应用场景4. 原型模式3TODO5. 单例模式4单例模式的主要优缺点：单例模式的主要应用场景结构型模式1. 适配器模式4适配器模式的主要优缺点适配器模式的主要应用场景实例：2. 桥接模式3桥接模式的主要优缺点桥接模式的
《面向对象是怎样工作的》读书笔记
weixin_45813589的博客
08-27 3263
我对象可好了，象对我也很好。
PHP面向对象学习笔记之二 生成对象的设计模式
12-19
【PHP面向对象设计模式详解】 在PHP编程中，面向对象设计模式是一种常用的设计思路，能够帮助我们编写可扩展、可维护的代码。本篇笔记主要探讨两种常见的设计模式：单例模式和工厂方法模式。 **一、单例模式** ...
读书笔记：面向对象设计的设计原则和设计模式.zip
07-29
读书笔记：面向对象设计的设计原则和设计模式
PHP 面向对象程序设计（oop）学习笔记(三) – 单例模式和工厂模式
12-18
面向对象程序设计（OOP）是现代编程语言中一种重要的编程范式，它将程序视为由相互协作的对象组成，每个对象都有自己的属性和行为。在PHP中，OOP提供了类和对象的概念，允许开发者创建复杂、可重用的代码结构。 在...
《javascript设计模式》学习笔记五：Javascript面向对象程序设计工厂模式实例分析
10-15
JavaScript设计模式中的工厂模式是一种创建型设计模式，它提供了一种创建对象的最佳方式。在工厂模式中，当创建对象时，我们不会对客户端暴露创建逻辑，而是引用一个共同的接口来指向新创建的对象。 1. **简单工厂...
设计模式-适配器模式
最新发布
极地星辰
09-21 260
适配器模式是解决接口不兼容问题的有效手段，它通过定义一个中间层来实现接口的转换和适配，使得原本无法协同工作的类能够一起工作。在软件开发中，当我们遇到需要将旧系统组件集成到新系统中，或者需要集成第三方库时，都可以考虑使用适配器模式。通过灵活应用适配器模式，我们可以提高系统的复用性、灵活性和可扩展性，同时降低模块之间的耦合度。本文将深入分析适配器模式的原理、应用场景、优缺点，并通过C++示例来展示其实际应用。
面向对象程序设计
m0_38066007的博客
09-17 247
11。
【系统架构设计师】设计模式的分类
Programming Talk
09-18 247
设计模式（Design Pattern）是软件开发中的最佳实践，旨在解决常见的设计问题。创建型模式结构型模式行为型模式，每个类别都提供了解决特定问题的模式。下面将详细介绍每个类别及其包含的所有设计模式，并提供简要的说明，帮助区分不同模式。设计模式提供了一套通用的解决方案来应对软件开发中的复杂问题。通过了解每种模式的分类及其适用场景，可以更高效地设计灵活、可扩展的系统。
C++设计模式
叫好与叫座虽然不是对立面，但想在同一个作品中达到双重效果很难。
09-15 1923
Abstract Factory 抽象工厂模式：提供一个创建一系列相关或相互依赖对象的接口，而无需指定它们具体的类。Adapter适配器模式：将一个类的接口转换成客户希望的另外一个接口。Adapter模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工 作。Bridge桥接模式：将抽象部分与它的实现部分分离，使它们都可以独立地变 化。Builder建造者模式：将一个复杂对象的构建与它的表示分离，使得同样的构建 过程可以创建不同的表示。
面向对象与设计模式基础解析
在面向对象设计中，关注点还包括软件的可维护性、可重用性和可扩展性： - **可维护性**：指软件在长期运行过程中，能够方便地进行修改和更新，以适应变化的需求。良好的设计和文档是提高可维护性的关键。 - **可...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值