最近过了一遍尼古拉斯泽卡斯的高级程序设计第三版(红皮书)第六章:面向对象程序设计,现在把总结出来的东西和大家分享一下。

主要内容如下:

1.工厂模式

2.构造函数模式

3.原型模式

4.继承

一、工厂模式

工厂模式中的函数中会创建一个对象,最后return这个对象,通过每次调用时传入的参数不同来解决创建多个相似对象的问题。

// 工厂模式
function creatPerson(name, age, job) {
var o = {};
o.name = name;
o.age = age;
o.job = job;
o.sayName = function() {
console.log(this.name);
}
return o;
}
var tianjiao = creatPerson('tj',22,'fe');
console.log(tianjiao)

二、构造函数模式

构造函数本身也是函数,只不过是一个创建对象的函数

// 构造函数
function Person(name, age) {
this.name = name;
this.age = age;
this.sayName = function() {
console.log(this.name)
};
}
var tj2 = new Person('tj2', 23)
console.log(tj2)

要创建person新实例,必须使用new操作符,调用构造函数会经历以下四步:

1.创建一个新对象

2.将构造函数的作用域给了新对象(this指向新对象)

3.为新对象添加属性

4.返回新对象

创建自己定义的构造函数意味着将来可以将它的实例标识为一种特定的类型,而工厂模式则都是object,无法区别。

构造函数和其他函数的唯一区别是调用方式不同,而任何函数只要用new操作符调用,那他就可以作为构造函数。

三、原型模式

每个函数都有一个prototype属性,这个属性是一个指针,指向一个对象,这个对象的用途是包含可以由特定类型的实例共享的属性和方法。

使用原型对象的好处是可以让所有对象实例共享他所包含的属性和方法。不必在构造函数中定义对象实例的信息,而是可以将这些信息直接添加到原型对象中。

// 原型方法
function Person() { }
Person.prototype.name = 'tj3';
Person.prototype.age = 24;
Person.prototype.sayName = function(){
alert(this.name)
}
var tj3 = new Person();
console.log(tj3)
//更简单的原型方法
function Person() { }
Person.prototype = {
name:'tj4',
age:25,
sayName : function() {
alert(this.name)
}
};
var tj4 = new Person();
console.log(tj4)

  

四、组合使用构造函数和原型模式

构造函数模式用于定义实例属性,而原型模式定义方法和共享的属性。这种混合模式还支持向构造函数传递参数。

// 组合使用构造函数和原型模式
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.sayName = function() {
alert(this.name)
}
} Person.prototype = {
sayJob : function() {
console.log(this.job);
}
} var person1 = new Person('tj', 22 , 'fe');

五、原型链继承

原型链继承的主要思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。

警告:通过原型链继承是,不能使用对象字面量创建原型方法,这样会重写原型链!

// 原型链继承
function SuperType() {
this.color = ['red', 'blue'];
}
function SubType() { }
SubType.prototype = new SuperType();// 继承了SuperType
var instance1 = new SubType();
console.log(instance1);

  

六、借用构造函数继承

其实就是用call和apply实现继承

// 借用构造函数继承
function wanda() {
this.money = [1,2,3]
}
function sicong() {
wanda.call(this);
}
var sc = new sicong();
sc.money.push(666)
console.log(sc)

七、组合继承

将原型链和借用构造函数的技术组合起来一起用,好处是既能实现函数的复用,又能保证每个实例有自己的属性。

// 组合继承
function SuperType(name) {
this.name = name;
this.color = ['red', 'blue'];
}
SuperType.prototype.sayName = function() {
console.log(this.name);
};
function SubType(name, age) {
SuperType.call(this, name);//继承属性
this.age = age;
}
SubType.prototype = new SuperType();//继承方法
var instance1 = new SubType('tj', 22);
instance1.sayName();

最后还有寄生式继承和寄生组合式继承,自己工作中也没有用过,这里就不赘述了。

js面向对象小结(工厂模式,构造函数,原型方法,继承)的更多相关文章

  1. JS面向对象之工厂模式

    js面向对象 什么是对象 "无序属性的集合,其属性可以包括基本值.对象或者函数",对象是一组没有特定顺序的的值.对象的没个属性或方法都有一个俄名字,每个名字都映射到一个值. 简单来 ...

  2. js面向对象(对象/类/工厂模式/构造函数/公有和原型)

    https://www.cnblogs.com/sandraryan/ 什么是对象 js中一切都是对象(有行为和特征).js允许自定义对象,也提供了内建对象(string date math等) 对象 ...

  3. JavaScript提高篇之面向对象之单利模式工厂模型构造函数原型链模式

    1.单例模式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  4. js设计模式:工厂模式、构造函数模式、原型模式、混合模式

    一.js面向对象程序 var o1 = new Object();     o1.name = "宾宾";     o1.sex = "男";     o1.a ...

  5. 面向对象+闭包+三种对象的声明方式(字面式、new Object、构造函数、工厂模式、原型模式、混合模式)

    面向对象: 对代码的一种抽象,对外统一提供调用接口的编程思想 对象的属性:事物自身拥有的东西 对象的方法:事物的功能 对象:事物的一个实例 对象的原型:.prototype -> 内存地址 -& ...

  6. JS面向对象(1)——构造函数模式和原型模式

    1.构造函数模式 构造函数用来创建特定的类型的对象.如下所示: function Person(name,age,job){ this.name=name; this.job=job; this.ag ...

  7. [JS设计模式]:工厂模式(3)

    简单工厂模式是由一个方法来决定到底要创建哪个类的实例, 而这些实例经常都拥有相同的接口. 这种模式主要用在所实例化的类型在编译期并不能确定, 而是在执行期决定的情况. 说的通俗点,就像公司茶水间的饮料 ...

  8. JS设计模式之工厂模式

    1 什么是工厂模式? 工厂模式是用来创建对象的一种最常用的设计模式.我们不暴露创建对象的具体逻辑,而是将将逻辑封装在一个函数中,那么这个函数就可以被视为一个工厂.工厂模式根据抽象程度的不同可以分为: ...

  9. JS设计模式--简单工厂模式

    在JS中创建对象会习惯的使用new关键字和类构造函数(也是可以用对象字面量). 工厂模式就是一种有助于消除两个类依赖性的模式. 工厂模式分为简单工厂模式和复杂工厂模式,这篇主要讲简单工厂模式. 简单工 ...

随机推荐

  1. CodeSmith

    完美解决CodeSmith无法获取MySQL表及列Description说明注释的方案   问题描述: CodeSmith是现在比较实用的代码生成器,但是我们发现一个问题: 使用CodeSmith编写 ...

  2. TestNg的xml配置

    TestNG中,可以通过配置xml来运行某一类.包.方法. 1.通过TestNg运行某一个类 <?xml version="1.0" encoding="UTF-8 ...

  3. CSS学习笔记:利用border绘制三角形

    在前端的笔试.面试过程中,经常会出现一些不规则图形的CSS设置,基本上多是矩形外加一个三角形.利用CSS属性可以实现三角形的生成,主要利用上下左右的边距的折叠. 1.第一种图形: .box { wid ...

  4. leetcode[70] Simplify Path

    题目的意思是简化一个unix系统的路径.例如: path = "/home/", => "/home"path = "/a/./b/../../ ...

  5. 在希望的田野上--生物柴油(Biodiesel)光明的未来

    请看下图: 这是科学家Bernie Tao教授给美国Purdue大学的学生们出的题目"有关大豆.谷物产品的创新竞赛",实质上,就是鼓舞研究.开发及应用生物柴油(Biodiesel) ...

  6. GIT+云盘作 做 文档管理工具

    GIT+云盘作 做 文档管理工具 在工作中, 会遇到公司的文档 和 自己家里的 文档进行同步的问题, 通常我们使用U盘作为传输节制, 但是不是非常好,文档的改动都不能发现, 导致回家同步的时候, 出各 ...

  7. 你的flume-ng的第一篇博客

    我在flume-ng 1.1.0 孵化版的时候就开始接触了,自己也搞了一段时间,没事扯扯心得吧. 先说在前面,flume-ng 后面的版本,我没仔细读change log ,比较农民 , 不知道新添了 ...

  8. Android入门之环境搭建

    欢迎访问我的新博客:http://www.milkcu.com/blog/ 原文地址:http://www.milkcu.com/blog/archives/1376935560.html 原创:An ...

  9. centos安装及配置

    centos安装 从网上下载最新的版本,用ultraiso做好系统盘,启动.安装过程没有什么可以说的,与其他发行版有点不同的是需要将安装包放到u盘根目录下(u盘容量最好大点,8~16G最好).开始没注 ...

  10. json在线编辑器

    今天搭建了一个json在线的编辑器. 这个主要的功能就是解析和检查json的语法是不是有错误.在使用json的时候,最担心的就是语法的问题了.尤其是自己手动去拼json格式的输出时候. 如图所示,左边 ...