我来重新学习js 的面向对象(part 3)

续上一集内容,有一些数据不需要共享的时候,但是又想实现共享数据处理,鱼与熊掌,都要兼得(老板就是这么霸气),那么经过工程师们的智慧交流,他们发现现实并非那么残酷,还有一些办法可取的,也就是组合使用构造函数模式和原型模式动态原型模式

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

image

组合使用构造函数模式和原型模式的特点主要体现在:

  • 构造函数模式用于定义实例属性
  • 原型模式用于定义方法和共享属性

效果就是,每个实例对象都会有自己的一份实例属性,但又同时又共享着对方法的引用,既节省了资源也满足了业务要求。

// 构造函数用于定义实例属性
function Food(name) {
  this.name = name;
  this.place = ["巴西", "印度"];
}
// 原型模式用于定义方法和共享属性
Food.prototype = {
  constructor: Food,
  sayName: function() {
    console.log("我是" + this.name);
  }
};

var food1 = new Food("苹果");
var food2 = new Food("苹果");
console.log(food1.place == food2.place); // 返回 false
food2.place.push("俄罗斯");
console.log(food1.place); // 返回 [ '巴西', '印度' ]
console.log(food2.place); // 返回 [ '巴西', '印度', '俄罗斯' ]

可以看到 palce 数组并不是同一个,并且通过对 food2的 place 数组赋值之后也不会影响 food1的 palce 数组的值,证明他们是互相独立的。

之所以有这么屌炸天的效果,就是因为利用了构造函数和原型模式各自的特点,互相补充。

二、动态原型模式

image

动态原型模式的特点是,在构造函数里面增加判断处理是否添加原型对象属性。

function Food(name, place) {
  this.name = name;
  this.place = place;
  if (typeof this.sayName !== "function") {
    Food.prototype.sayName = function() {
      console.log("我是" + this.name);
    };
  }
}

var food1 = new Food("苹果", ["巴西", "印度"]);
food1.sayName(); // 返回 我是苹果
  • 通过在构造函数执行的时候来判断是否将共享的东西添加到原型对象里面,这样就不怕之前出现的先 new 实例化对象,然后再添加原型对象的属性的问题了(回想一下原型对象被重写之后,原型对象丢失,实例无法使用原来的原型对象的数据的问题)。
  • 更符合 OOP 开发习惯,不需要将构造函数和原型对象分开单独处理,可以写在一起。

动态原型模式和组合使用构造函数模式和原型模式的原理其实很类似,都是各自利用了构造函数和原型模式的独特的特点来实现的,不过在实现的过程中用了一些取巧,所以导致了他们的分别,细细回想一下就明白了。

三、寄生构造函数模式

这个只是了解一下即可,因为实际中用得不多,但是需要扩大知识面,无论从装逼还是装逼都还是需要的。

image

寄生这个词其实不太好理解,英文原文是叫 parasitic 直接翻译过来就是寄生了。如果硬要理解,就是创建的实例对象其实是依附上去的,跟构造函数和原型对象本身并没有任何关系,就好像寄生虫和动物,他们仅仅只是寄生在上面而已。

function Food(name) {
  var o = new Object(); 
  o.name = name;
  o.sayName = function() {
    console.log("我是" + this.name);
  };
  return o; // 重写返回值
}

var food1 = new Food("苹果");
console.log(food1.name); // 返回 苹果
food1.sayName(); // 返回 我是苹果
  • 这里跟工厂模式极其相似,但这里使用了 new 进行实例化,换言之,也就是执行了构造函数来进行实例化。
  • 构造函数在不返回值的情况下,默认会返回新对象实例,而通过构造函数的末尾添加一个 return 语句,可以重写这个返回值。
  • 因为每次都是new Object();,而且构造函数的返回值被重写了,也就是说这个返回的新对象跟构造函数,跟原型对象是没有关系的,他们同时具有工厂函数和构造函数的缺点。
  • 这里能够访问 name,因为这里的 name 属性是暴露到返回的对象上面了,成为返回的对象的属性,就跟 sayName方法一样,可以被外部访问了。

他有一个严重的问题,就是原型对象和实例和构造函数之间没办法关联,这样不适合在有一定规模复杂度的程序开发中使用。(因为他每次都会new Object(),重置原型对象的信息)

四、稳妥构造函数模式

这个只是了解一下即可,因为实际中我还没用过,但是需要扩大知识面,无论从装逼还是装逼都还是需要的。

image

所谓稳妥对象,是指没有公共属性,而且其方法也不引用 this 对象,而且也不能被篡改,稳得一逼。

function Food(name) {
  var o = new Object();
  var color = 'red';
  o.sayName = function() {
    console.log("我是" + name);
    console.log("颜色是" + color);
  };
  return o;
}

var food1 = Food("苹果");
console.log(food1.name); // 返回 undefined
console.log(food1.color); // 返回 undefined
food1.sayName(); // 返回 我是苹果,颜色是red
  • 可以看到这里不使用this,也不使用 new 来实例化对象。
  • 不能通过其他方式访问 name 属性,因为没有name 属性没有被暴露出来。
  • 只能通过暴露出来的方法来访问对象内部的属性,间接保护了内部私有属性。

稳妥模式适合在一些安全环境(禁止使用 this,并且也需要保护私有属性)里面使用。
他依然有一个严重的问题,就是原型对象和实例和构造函数之间没办法关联,这样不适合在有一定规模复杂度的程序开发中使用。(因为他每次都会new Object(),重置原型对象的信息)

五、文末我们又遇到新问题了

公司业务越来越大了,公司的产品需要做一些分类,例如动物要分肉食动物,菜食动物,食物要分水果和蔬菜和肉类等,水果下面还要分苹果,香蕉等等,要是按照现在的模式,看来是要有多少种就要写多少种,然后还可能会导致一些种类属性重复,老司机一眼就看出来,需要做一些种类继承了,但是要怎么做呢?

参考内容

  1. 红宝书,javascript 高级程序设计第三版
  2. 浅谈稳妥构造函数模式的实现原理与机制

原文转载:https://www.godblessyuan.com/2018/08/%E6%88%91%E6%9D%A5%E9%87%8D%E6%96%B0%E5%AD%A6%E4%B9%A0%20javascript%20%E7%9A%84%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%EF%BC%88part%203%EF%BC%89.html

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,340评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,762评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,329评论 0 329
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,678评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,583评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 47,995评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,493评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,145评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,293评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,250评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,267评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,973评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,556评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,648评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,873评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,257评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,809评论 2 339

推荐阅读更多精彩内容