美文网首页
构造函数模式

构造函数模式

作者: 弹力盒 | 来源:发表于2021-08-12 23:03 被阅读0次
/**
 * 构造函数模式
 * 1、与工厂模式相比
 *    a、没有显示的创建对象
 *    b、直接将属性和方法赋给了构造函数的 this 对象
 *    c、没有 return 语句
 * 
 * 2、直接调用构造函数时,构造函数与普通函数无异
 *    this 指向调用该函数的最后一个对象
 * 
 * 3、构造函数的缺点
 *    每个方法都要在每个实例上重新创建一遍,即每个实例的同名方法都不同一个方法
 *    即 c1.speak != c2.speak
 */

function Constructor (name, sex, job) {
  this.name = name
  this.sex = sex
  this.job = job
  // this.speak => new Function('console.log("hello...")')
  this.speak = function () {
    console.log('hello...')
  }
}

/**
 * 1、创建构造函数对象必须使用 new 操作符,new 操作符的四个步骤为
 *    a、创建一个新的对象
 *    b、将构造函数的作用域赋给新对象(因此 this 就指向了新对象)
 *    c、执行构造函数中的代码(为这个新对象添加属性)
 *    d、返回新对象
 * 
 * 2、生成的实例对象都有一个 constructor(构造函数) 属性,该属性指向构造函数
 *    生成的实例对象即是构造函数 Constructor 的实例,也是构造函数 Object 的实例
 */
const c1 = new Constructor('tang', 'man', 'web design')
const c2 = new Constructor('chen', 'womam', 'teacher')
console.log(c1)
console.log(c2)

// true,实例对象是构造函数 Constructor 的实例
console.log(c1 instanceof Constructor)
// false,实例对象不是构造函数 Function 的实例
console.log(c1 instanceof Function)
// true,实例对象也是对象 Object 构造函数的实例(对象均继承自 Object)
console.log(c1 instanceof Object)

/**
 * 构造函数直接调用
 */
const o = new Object()
Constructor.call(o, 'chen', 'womam', 'teacher')
console.log(o)

/**
 * 每个同名方法在实例上都会被重新创建
 */
const c3 = new Constructor('tang', 'man', 'web design')
const c4 = new Constructor('chen', 'womam', 'teacher')
console.log(c3.speak == c4.speak) // false

/**
 * 对于缺点的改进方法,设置了一个全局的函数,但也有新的问题
 * 1、若对象需要定义多个方法,则需要创建多个全局函数,没有封装性可言
 */
function ConstructorMethod (name, sex, job) {
  this.name = name
  this.sex = sex
  this.job = job
  this.speak = speak // 相当于指向到了一个地址的指针
}

// 全局函数
function speak () {
  console.timeLog('hello...')
}

const m1 = new ConstructorMethod('tang', 'man', 'web design')
const m2 = new ConstructorMethod('chen', 'womam', 'teacher')

console.log(m1.speak === m2.speak) // true

相关文章

  • 前端面试题总结【37】:javascript对象的几种创建方式

    工厂模式 构造函数模式 原型模式 混合构造函数和原型模式 动态原型模式 寄生构造函数模式 稳妥构造函数模式 推荐:...

  • 对象的创建与继承

    创建对象 工厂模式 => 构造函数模式 => 原型对象模式 => 构造函数模式+原型对象模式 工厂模式 构造函数模...

  • 构造函数-js-高级程序设计-第六章笔记

    前言 理解对象 创建对象构造函数模式原型模式组合使用构造函数模式和原型模式动态原型模式寄生构造函数模式稳妥构造函数...

  • 第六章——创建对象

    一、寄生构造函数模式、工厂模式、稳妥构造函数模式的区别与联系 寄生构造函数模式(重写了构造函数的返回值): 工厂模...

  • 前端设计模式

    1.写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。 构造函数模式 构造函数模式是...

  • JS函数

    1.0 工厂模式 2.0 构造函数模式 3.0 原型模式 4.0 构造函数 + 原型模式 实例化构造函数时,返回的...

  • Js创建对象的几种模式

    Js创建对象的几种模式 工厂模式 构造函数模式 原型模式 组合使用构造函数模式和原型模式 动态原型模式 稳妥构造函数模式

  • 设计模式

    构造函数模式 混合模式 混合模式就是构造函数模式和原型模式的混合,在混合模式中,构造函数用于定义实例属性,而原型模...

  • js最常用的创建对象和继承方法

    对象创建方法有很多种:工厂模式、构造函数模式、原型模式,动态原型模式、寄生构造函数模式、稳妥构造函数模式……继承的...

  • 常见设计模式

    1.写出 构造函数模式、混合模式、模块模式、工厂模式、单例模式、发布订阅模式的范例。 //1.构造函数模式//构造...

网友评论

      本文标题:构造函数模式

      本文链接:https://www.haomeiwen.com/subject/dicypltx.html