1、工厂模式
function createPerson(name, job) { var o = new Object()
o.name = name
o.job = job
o.sayName = function() { console.log(this.name)
} return o
}var person1 = createPerson('Jiang', 'student')var person2 = createPerson('X', 'Doctor')
可以无数次调用这个工厂函数,每次都会返回一个包含两个属性和一个方法的对象
工厂模式虽然解决了创建多个相似对象的问题,但是没有解决对象识别问题,即不能知道一个对象的类型
2、构造函数模式
function Person(name, job) { this.name = name this.job = job this.sayName = function() { console.log(this.name)
}
}var person1 = new Person('Jiang', 'student')var person2 = new Person('X', 'Doctor')
没有显示的创建对象,使用new来调用这个构造函数,使用new后会自动执行如下操作
· 创建一个新对象
· 这个新对象会被执行[[prototype]]链接
· 这个新对象会绑定到函数调用的this
· 返回这个对象
使用这个方式创建对象可以检测对象类型
person1 instanceof Object // trueperson1 instanceof Person //true
但是使用构造函数创建对象,每个方法都要在每个实例上重新创建一次
3、原型模式
function Person() {
}
Person.prototype.name = 'Jiang'Person.prototype.job = 'student'Person.prototype.sayName = function() { console.log(this.name)
}var person1 = new Person()
将信息直接添加到原型对象上。使用原型的好处是可以让所有的实例对象共享它所包含的属性和方法,不必在构造函数中定义对象实例信息。
原型是一个非常重要的概念,在一篇文章看懂proto和prototype的关系及区别中讲的非常详细
更简单的写法
function Person() {
}
Person.prototype = {
name: 'jiang',
job: 'student',
sayName: function() { console.log(this.name)
}
}var person1 = new Person()
将Person.prototype设置为等于一个以对象字面量形式创建的对象,但是会导致.constructor不在指向Person了。
使用这种方式,完全重写了默认的Person.prototype对象,因此 .constructor也不会存在这里
Person.prototype.constructor === Person // false
如果需要这个属性的话,可以手动添加
function Person() {
}
Person.prototype = {
constructor:Person
name: 'jiang',
job: 'student',
sayName: function() {
console.log(this.name)
}
}
不过这种方式还是不够好,应为constructor属性默认是不可枚举的,这样直接设置,它将是可枚举的。所以可以时候,Object.defineProperty方法
Object.defineProperty(Person.prototype, 'constructor', {
enumerable: false,
value: Person
})
缺点
使用原型,所有的属性都将被共享,这是个很大的优点,同样会带来一些缺点
原型中所有属性实例是被很多实例共享的,这种共享对于函数非常合适。对于那些包含基本值的属性也勉强可以,毕竟实例属性可以屏蔽原型属性。但是引用类型值,就会出现问题了
function Person() {
}
Person.prototype = {
name: 'jiang',
friends: ['Shelby', 'Court']
}var person1 = new Person()var person2 = new Person()
person1.friends.push('Van')console.log(person1.friends) //["Shelby", "Court", "Van"]console.log(person2.friends) //["Shelby", "Court", "Van"]console.log(person1.friends === person2.friends) // true
friends存在与原型中,实例person1和person2指向同一个原型,person1修改了引用的数组,也会反应到实例person2中
4、组合使用构造函数模式和原型模式
这是使用最为广泛、认同度最高的一种创建自定义类型的方法。它可以解决上面那些模式的缺点
使用此模式可以让每个实例都会有自己的一份实例属性副本,但同时又共享着对方法的引用
这样的话,即使实例属性修改引用类型的值,也不会影响其他实例的属性值了
function Person(name) { this.name = name this.friends = ['Shelby', 'Court']
}
Person.prototype.sayName = function() { console.log(this.name)
}var person1 = new Person()var person2 = new Person()
person1.friends.push('Van')console.log(person1.friends) //["Shelby", "Court", "Van"]console.log(person2.friends) // ["Shelby", "Court"]console.log(person1.friends === person2.friends) //false
5、动态原型模式
动态原型模式将所有信息都封装在了构造函数中,初始化的时候,通过检测某个应该存在的方法时候有效,来决定是否需要初始化原型
function Person(name, job) { // 属性
this.name = name this.job = job // 方法
if(typeof this.sayName !== 'function') {
Person.prototype.sayName = function() { console.log(this.name)
}
}
}var person1 = new Person('Jiang', 'Student')
person1.sayName()
只有在sayName方法不存在的时候,才会将它添加到原型中。这段代码只会初次调用构造函数的时候才会执行。
此后原型已经完成初始化,不需要在做什么修改了
这里对原型所做的修改,能够立即在所有实例中得到反映
其次,if语句检查的可以是初始化之后应该存在的任何属性或方法,所以不必用一大堆的if语句检查每一个属性和方法,只要检查一个就行
6、寄生构造函数模式
这种模式的基本思想就是创建一个函数,该函数的作用仅仅是封装创建对象的代码,然后再返回新建的对象
function Person(name, job) { var o = new Object()
o.name = name
o.job = job
o.sayName = function() { console.log(this.name)
} return o
}var person1 = new Person('Jiang', 'student')
person1.sayName()
这个模式,除了使用new操作符并把使用的包装函数叫做构造函数之外,和工厂模式几乎一样
构造函数如果不返回对象,默认也会返回一个新的对象,通过在构造函数的末尾添加一个return语句,可以重写调用构造函数时返回的值
7、稳妥构造函数模式
首先明白稳妥对象指的是没有公共属性,而且其方法也不引用this。
稳妥对象最适合在一些安全环境中(这些环境会禁止使用this和new),或防止数据被其他应用程序改动时使用
稳妥构造函数模式和寄生模式类似,有两点不同:一是创建对象的实例方法不引用this,而是不使用new操作符调用构造函数
function Person(name, job) { var o = new Object()
o.name = name
o.job = job
o.sayName = function() { console.log(name)
} return o
}var person1 = Person('Jiang', 'student')
person1.sayName()

JavaScript函数创建方式的更多相关文章

  1. javascript对象创建方式

    工厂模式 在ECMAscript中无法创建类,所以开发人员就发明了一种函数,用函数来封装,以特定接口创建对象的细节,如下面的例子所示: function createPerson(name,age,j ...

  2. javascript函数声明方式

    javascript中函数的声明有三种方式: 最常见的函数声明: fun();//可以调用,因为这种声明方式会被浏览器优先加载. function fun() { alert("声明式的函数 ...

  3. JavaScript—对象创建方式

    JavaScript 也是面向对象的语言(oop) 之前学JavaScript 没有学对象.现在做下笔记 创建对象的方式: 1.  对象字面量 const hero = { name: '吕布', w ...

  4. javascript函数创建

    函数声明 function add(a,b){ return a+b } 函数表达式 <!--一般函数表达式--> var add = function(){ } <!--立即声明函 ...

  5. JavaScript 函数创建思想

    //定义一个函数的步骤//1.开辟一个新的空间地址//2.把函数体里面的代码当做字符串存储到空间里面(一个函数如果只定义了,没有执行的话,这个函数没有任何意义)//3.在把我们的地址给我们的函数名fu ...

  6. Javascript和JQuery函数定义方式

    Javascript 函数定义方式 1.function show() {     } 2.var cal = function() {     },必须先声明才能调用 示例: <html> ...

  7. 深入理解JavaScript函数

    本篇文章主要介绍了"深入理解JavaScript函数",主要涉及到JavaScript函数方面的内容,对于深入理解JavaScript函数感兴趣的同学可以参考一下. JavaScr ...

  8. Javascript函数中传递带空格的参数

    通常在页面中要让某些内容点击后产 生点击事件(非页面跳转)都会使用onclick,但是这样不适于需要传递参数的情况,于是写成直接调用Javascript函数的方式:<a href=javascr ...

  9. js 对象的创建方式和对象的区别

    js一个有三种方法创建对象,这里做一个总结. 1.对象直接量 所谓对象直接量,可以看做是一副映射表,这个方法也是最直接的一个方法,个人比较建议, 1 2 3 4 5 6 7 8 9 10 11 12 ...

随机推荐

  1. xdc如何设置输入延时

    常用命令: Set_input_delay,create_clock,set_output_delay以及用于组合逻辑的set_max_delay. Input delay: 什么是输入延时? Tra ...

  2. Windows下MariaDB数据搬家问题

    背景:公司买了一台服务器要将原来老服务器数据库数据导入新的服务器上,两台服务器环境如下 做好准备后开始实施,老数据库进行停库 找到MariaDB的安装目录下的整data目录进行拷贝,然后到新服务器进行 ...

  3. STM32F407读编码器没上拉电阻遇见的问题

    在调试之前由于本科阶段参加飞思卡尔智能汽车的竞赛,一直在使用与竞赛相关的单片机和编码器,后来由于工程的需要开始使用STM32的板子,在调试编码器的时候遇见了,使用了STM32的官方标准库中的定时器正交 ...

  4. Linux(CENTOS7) Nginx安装

    1.下载nginx  在disk目录下,输入以下命令进行下载: wget http://nginx.org/download/nginx-1.12.2.tar.gz 2.解压nginx 在disk目录 ...

  5. Java if、switch语句,break,case,类型转换、常量、赋值比较、标识符(2)

    if语句: /* if else 结构 简写格式: 变量 = (条件表达式)?表达式1:表达式2: 三元运算符: 好处:可以简化if else代码. 弊端:因为是一个运算符,所以运算完必须要有一个结果 ...

  6. Go mod graphql-go 的 Replace

    现在在项目中大量的使用 graphql,但用的版本是3年前的版本. 3年前包的url:github.com/neelance/graphql-go 现在的url:github.com/graph-go ...

  7. Python笔记_第四篇_高阶编程_再议装饰器和再议内置函数

    1. 概述: 我们在前面用了很多的装饰器这个工具的方法.这个位置要系统的讲一下装饰器. 1.2 为什么需要装饰器. 装饰器本质是一个Python函数,它可以让其他函数在不需要任何代码变动的前提下增加额 ...

  8. sourceTree 代码回滚(git 和http)

    近些时候,有遇到提交后代码有误的情况,所以需要回退到前一个版本.因为不常见,所以每次都不是很熟练,记录于此,以备查阅. 一.[将master重置到这次提交] 在sourceTree中选中错误的提交的下 ...

  9. UML-逻辑架构&包图-相关概念

    1.逻辑架构 软件的宏观组织结构.含: 1).包 2).子系统 3).层 2.层 对类.包.子系统的分组(内聚).例如:mvc.在OOA/D中要重点关注核心应用逻辑(或领域)层. 3.UML包图 描述 ...

  10. 03-string字符串和while循环

    目录 03-string字符串和while循环 1. string介绍 2. 字符串的运算 3. 下标及分片 4. 格式化输出 5. f-string格式化输出用法 6. 字符串方法 7. 布尔值,空 ...