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. HTML5 Canvas——基础入门

    认识canvas html5的新标签 <canvas>标签只是图像容器,必须使用js来绘制图形 可以通过多种方法使用canvas绘制路径,盒,圆,字符以及添加图像 canvas画布 < ...

  2. winform屏蔽鼠标右键

    /// <summary> /// 屏蔽右键 /// </summary> internal class MenuHandler : IContextMenuHandler { ...

  3. TX2Ubuntu16.04远程登录

    1.在PC机与TX2都要同步时钟: sudo apt-get install chrony sudo ntpdate ntp.ubuntu.com 如果ntpdate有错误检查是否安装ntpdate ...

  4. D10 基本数据类型(各种职业的技能分析) 主要为 int 和 str

    在python中具有魔法的  职业  类型 召唤每种职业  在pychar 中 打出该职业的名称 按住Ctrl 光标在该职业名称上 点击就能看该职业的技能 1   数字   int a = " ...

  5. 解决ubuntu16.04 ‘E: 无法获得锁 /var/lib/dpkg/lock-frontend - open (11: 资源暂时不可用) ’ 问题

    问题: 当运行sudo apt-get install/update/其他命令时,会出现如下提示: E: 无法获得锁 /var/lib/dpkg/lock-frontend - open (11: 资 ...

  6. 统计_statistics_不同的人_大样本_分析_统计方法_useful ?

    统计_statistics_不同的人_大样本_分析_

  7. 如何在 main() 执行之前先运行其它函数

    摘要:我们知道 C++ 的全局对象的构造函数会在 main 函数之前先运行,其实在 c 语言里面很早就有啦,在 gcc 中可以使用 __attribute__ 关键字指定如下(在编译器编译的时候就绝决 ...

  8. Ivory Coast Map

    Fun Facts about Cote d'Ivoire The Republic of Cote d'Ivoire (previously known as the Ivory Coast) is ...

  9. JS中的let变量

    介绍JS中的let变量: let允许你声明一个作用域被限制在块级中的变量.语句或者表达式.在Function中局部变量推荐使用let变量,避免变量名冲突. 作用域规则 let 声明的变量只在其声明的块 ...

  10. \_\_getattribute\_\_

    __getattribute__ 一.__getattr__ 不存在的属性访问,触发__getattr__ class Foo: def __init__(self, x): self.x = x d ...