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. js 关联数组

    踩得坑: JS ,通过 new Array()创建了一个数组: var param =  new Array();param["key1"] = value1;param[&quo ...

  2. mysql出现 too many connections

    出现这个问题的原因网上大致都是说这三种 1.慢sql 2.大量持久性的连接 3.程序没有及时关闭连接 解决方式 mysql -u 账号 -p 输入密码 show processlist; kill掉s ...

  3. [RoarCTF 2019]Easy Calc-协议层攻击之HTTP请求走私

    0X01:什么是HTTP请求走私 HTTP请求走私属于协议层攻击,是服务器漏洞的一种. HTTP请求走私是一种干扰网站处理从一个或多个用户接收的HTTP请求序列的方式的技术.使攻击者可以绕过安全控制, ...

  4. 安卓和iOS统一下载页面

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. POJ - 1061 扩展欧几里德算法+求最小正整数解

    //#pragma comment(linker, "/STACK:1024000000,1024000000") //#pragma GCC optimize(2) #inclu ...

  6. UVA 10801 多线程最短路

    题意:一栋摩天大楼从0层到K层,有N部电梯,每个电梯都有自己的运行速度,此外,对于某个电梯来说,并不是每一层都会停,允许在某一层进行电梯换乘,每次换乘固定消耗60秒,最终求从0层去K层的最短时间,如果 ...

  7. 63)对于STL基本概念东西 自己百度(没有整理)

    基础知识 看  C++进阶课程讲义的那个word文档

  8. MyBatis从入门到精通(第4章):MyBatis动态SQL【foreach、bind、OGNL用法】

    (第4章):MyBatis动态SQL[foreach.bind.OGNL用法] 4.4 foreach 用法 SQL 语句中有时会使用 IN 关键字,例如 id in (1,2,3).可以使用 ${i ...

  9. EL表达式获取属性值的原理

    EL表达式获取对象属性的原理是这样的:以表达式${user.name}为例EL表达式会根据name去User类里寻找这个name的get方法,此时会自动把name首字母大写并加上get前缀,一旦找到与 ...

  10. Android通过包名打开第三方应用

    import android.content.ComponentName; import android.content.Context; import android.content.Intent; ...