美文网首页
js工厂、构造函数、原型模式的学习

js工厂、构造函数、原型模式的学习

作者: 小小小小的人头 | 来源:发表于2019-07-21 23:37 被阅读0次

学习笔记(大白话):

1.工厂模式

理解:该模式抽象了创建具体对象的过程

function createPerson(name,age,obj){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.obj = obj;
    o.sayName = function(){
        console.log(this.name)
    }
}
var person = createPerson("小人头",18,"it")
var person1 = createPerson("小人头",18,"it")

createPerson可以接受一些参数。返回一个带有特定属性的对象;
弊端:工厂模式虽然解决了创建多个相似对象的问题,但却没有解决对象识别的问题(既怎样知道一个对象的类型)
有问题那就需要 去解决--就有了新的模式出现

构造函数模式

我们平常使用到的-Object、Array都是构造函数(原生构造函数)。运行时,自动就生成在运行环境中(亲妈养的)。当然我们也可以创建自定义的构造函数,自定义对象类型的属性和方法。将上面例子进行修改

function Person(bane,age,job){
    this.name = name;
    this.age = age;
    this.job= job
    this.sayName = function(){
        console.log(this.name)
    }
}
var person1  =  new Person("小人头",18,"it")

2个代码都实现了创建对象的过程,里面代码基本一致。但是我们比较下构建函数的区别:

  • 1.没有显示的创建一个对象
  • 2.直接将属性和方法赋值给了this
  • 3.没有return 语句

要创建Person的实例必须通过 new 来实现,这时候我们代码会经历下面的顺序

  • 1.创建1个新的对象
  • 2.将构造函数的作用域赋值给新的对象(this就指向了新的对象)
  • 3.指向构造函数内的代码
  • 4.返回新的对象

刚才说也说了构造函数模式比工厂模式多了判断类型的能力-我们如何判断呢 用到一个instanceof 进行检查类型

person1 instanceof Object //true
person1 instanceof Person //true

算是一个发展历史吧--

3.构造函数使用注意和普通函数区别

可能很多人会想着。什么就算是构造函数--答案:通过new 操作符来调用的都算作构造函数。 那构造函数和普通函数使用有何区别呢--我们用上面例子来说明

//当做构造函数使用;
var person = new Person("小明",18,"it");
person.name //小明

//当做普通函数使用
Person("小明",18,"it");
window.name//小明

//在其他对象中使用
var o = new Object();
Person.call(o,"小明",18,"it")
o.name//小明

通过上面例子。我们其实就可以看出来使用后差别;当做普通函数使用 我们的函数内的属性指向的是全局对象 既window,在使用call时候 属性就指向了O对象 这边其实算是小细节吧--可能大家都知道 记录一下;

4.构造函数的劣势

这边简单说下-上面的例子中。我们有sayName的一个函数 缺点就是从这来的了---->我们每构造一个实例时。就需要在实例上重新创建一遍这个sayName这个方法,创建了就需要创建对象(函数也是对象) 我的理解就是可能资源的浪费吧
然后我们可以优化一波-就是把sayName这个方法给提出来--那我们每个实例就不需要重新创建了方法函数了

function perSon(name,age,jon){
      ......//代码依旧
      this.sayName = sayName;
}
sayName(){
  console.log(this.name)
}

这样算是得到可优化---但是sayName这个方法就成了全局对象了。 其实也挺low得---于是乎就出现了一个新的模式

5.原型模式

每个函数都有一个 prototype属性--这个呢是指向原型对象的-这个后面会写关于原型对象的文章 就会理解了(理解为底层机制吧)
我们可以用下面代码实现比较好的写法

function Person(){
}
person.prototype.name = "小明";
person.prototype.age = 18;
Person.prototype.sayName= function(){
    console.log(this.name)
}
var person = new Person()
person.name // 小明

上面代码意思就是创建一空函数--将所有的属性和方法放置到 原型对象上面。所有的实例 都可以共享他们;也是一种模式

今天学习笔记记录到此

相关文章

  • Js创建对象的几种模式

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

  • 2020-12-15

    js对象的创建和函数 创建对象 工厂模式 构造函数 原型方式+构造函数

  • 对象的创建与继承

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

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

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

  • JS函数

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

  • 创建对象方法

    (1)工厂模式 (2)构造函数模式 (3)原型模式 (4)组合使用构造函数模式和原型模式 (1)工厂模式:缺点:不...

  • js面向对象的几种写法

    一、工厂模式 二、构造函数模式 三、原型模式 四、组合使用构造函数和原型模式 五、原型链继承 六、借用构造函数继承...

  • 关于JavaScript创建对象的多种方式

    JavaScript创建对象的方法 工厂模式 构造函数模式 原型模式 组合使用构造函数模式和原型模式 动态原型模式...

  • js面向对象设计模式

    1、工厂模式 2、构造函数模式 3、原型模式 4、组合使用构造函数模式和原型模式 5、动态原型模式 6、寄生构造函...

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

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

网友评论

      本文标题:js工厂、构造函数、原型模式的学习

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