JS面向对象精要(四)_构造函数和原型对象


JS面向对象精要(一)_原始类型和引用类型
JS面向对象精要(二)_函数
JS面向对象精要(三)_理解对象
JS面向对象精要(四)_构造函数和原型对象
JS面向对象精要(五)_继承

构造函数和原型对象

由于 JavaScript 缺乏类，它用构造函数和原型对象来给对象带来与类相似的功能。但是，这些相似的功能并不一定表现的跟类完全一致

4.1 构造函数

构造函数就是你用 new 创建对象时调用的函数, 如 js 内建对象的构造函数，Object,Array,Function。 使用构造函数的目的是为了轻松创建许多拥有相同属性和方法的对象

  • 使用构造函数的好处在于所有用同一个构造函数创建的对象都具有同样的属性和方法。如果想创建多个相同的对象，你可以创建自己的构造函数以及引用类型。和普通函数的唯一的区别是构造函数名应该首字母大写
function Person() {}

var person1 = new Person();
var person2 = new Person();

console.log(person1); // Person {}
console.log(person2); // Person {}

console.log(person1 instanceof Person); // true
console.log(person2 instanceof Person); // true

即使 Person 构造函数并没有显式返回任何东西，person1 和 person2 都会被认为是一个新的 Person 类型的实例。new 操作符会自动创建给定类型的对象并返回它们。这也意味着，你可以用 instanceof 操作符获取对象的类型

  • 可以用构造函数属性来检查一个对象的类型。每个对象在创建时都自动拥有一个构造函数属性，其中包含了一个指向其构造函数的引用

通过对象字面形式或 Object 构造函数创建出来的泛用对象，其构造函数属性指向 Object；那些通过自定义构造函数创建出来的对象，其构造函数属性指向创建它的构造函数

console.log(person1.constructor === Person); // true
console.log(person2.constructor === Person); // true

使用构造函数的目的是为了轻松创建许多拥有相同属性和方法的对象。为此，你只需要在构造函数内简单地给 this 添加任何你想要的属性即可,当你调用构造函数时，new 会自动创建 this 对象，且其类型就是构造函数的类型。（在本例中为 Person）构造函数本身不需要返回一个值，new 操作符会帮你返回。

function Person(name) {
  this.name = name;
  this.sayName = function() {
    console.log(this.name);
  };
}

var person1 = new Person("尼古拉斯1");
var person2 = new Person("尼古拉斯2");

console.log(person1); // Person { name: '尼古拉斯1', sayName: [Function] }
console.log(person2); // Person { name: '尼古拉斯2', sayName: [Function] }

注意：你也可以在构造函数中显式调用 return。如果返回的值是一个对象，它会代替新创建的对象实例返回。如果返回的值是一个原始类型，它会被忽略，新创建的对象实例会被返回

function Person(name) {
  this.name = name;
  this.sayName = function() {
    console.log(this.name);
  };
  return 123456789; // 返回值原始属性，被忽略
}
var person1 = new Person("尼古拉斯");
console.log(person1); // Person { name: '尼古拉斯', sayName: [Function]

// =====================================

function Person(name) {
  this.name = name;
  this.sayName = function() {
    console.log(this.name);
  };
  return {
    name: "显示返回的对象"
  };
}
var person1 = new Person("尼古拉斯");

// 返回的值是一个对象 ,会代替new出的新的实例
console.log(person1); // { name: '显示返回的对象' }

构造函数允许你用一致的方式初始化一个类型的实例，在使用对象前设置好所有的属性，你也可以在构造函数中用 Object.defineProperty()方法来帮助我们初始化。

function Person(name) {
  // name属性是一个访问者属性，利用name参数来存取实际的值。
  // 之所以能这样做，是因为命名参数就相当于一个本地变量。
  Object.defineProperty(this, "name", {
    get: function() {
      return name;
    },
    set: function(newValue) {
      name = newValue;
    },
    enumerable: true,
    configurable: true
  });
  this.sayName = function() {
    console.log(this.name);
  };
}
var person1 = new Person("尼古拉斯");
person1.sayName(); // 尼古拉斯

console.log(person1); // Person { name: [Getter/Setter], sayName: [Function] }

始终确保用 new 调用构造函数；否则，你就是在冒改变全局对象的风险，而不是创建一个新的对象。

var person2 = Person("Eastboat");
console.log(person2 instanceof Person); // false
console.log(typeof person2); // undefined
console.log(name); // Eastboat

分析如上代码：

  • Person 没有通过 new 调用，构造函数中的 this 对象等于全局 this 对象
  • Person 构造函数没有依靠 new 提供返回值，person2 变量则为 undefined
  • 没有 new，Person 只不过是一个没有返回语句的函数
  • 对 this.name 的赋值实际上是创建了一个全局变量 name 来保存传递给 Person 的参数

注意：在严格模式下，当你不通过 new 调用 Person 构造函数时会出现错误。这是因为严格模式并没有为全局对象设置 this。this 保持为 undefined，而当你试图为 undefined 添加属性时都会出错。

构造函数缺点：构造函数允许你给对象配置同样的属性，但是构造函数并没有消除代码冗余。在之前的例子中，每一个对象都有自己的 sayName()方法。这意味着如果你有 100 个对象实例，你就有 100 个函数做相同的事情，只是使用的数据不同，如果所有的对象实例共享同一个方法会更有效率(原型对象)

4.2 原型对象

可以把原型对象看作是对象的基类。几乎所有的函数（除了一些内建函数）都有一个名为 prototype 的属性，该属性是一个原型对象用来创建新的对象实例。所有创建的对象实例共享该原型对象，且这些对象实例可以访问原型对象的属性。例如，hasOwnProperty()方法被定义在泛用对象 Object 的原型对象中，但却可以被任何对象当作自己的属性访问

var person = {
  name: "尼古拉斯"
};

console.log("name" in person); // true
console.log(person.hasOwnProperty("name")); // true
console.log("hasOwnProperty" in person); // true
console.log(person.hasOwnProperty("hasOwnProperty")); // false

console.log(Object.prototype.hasOwnProperty("hasOwnProperty")); // true

即使 book 中并没有 hasOwnProperty()方法的定义，仍然可以通过 book.hasOwnProperty()访问该方法。这是因为该方法的定义存在于 Object.prototype 中。in 操作符对原型属性和自有属性都返回 true。

你可以用这样一个函数去鉴别一个属性是否是原型属性。

// 如果某个属性in一个对象，但hasOwnProperty()返回false，那么这个属性就是一个原型属性。
function hasPrototypeProperty(object, name) {
  return name in object && !object.hasOwnProperty(name);
}

// 接上一个对象字面量...
// ....
Object.prototype.age = 18;
console.log(hasPrototypeProperty(person, "name")); // false
console.log(hasPrototypeProperty(person, "age")); // true

4.2.1 [[Prototype]]属性

一个对象实例通过内部属性[[Prototype]]跟踪其原型对象。该属性是一个指向该实例使用的原型对象的指针。当你用 new 创建一个新的对象时，构造函数的原型对象会被赋给该对象的[[Prototype]]属性。

  1. 可以调用对象的 Object.getPrototypeOf()方法读取[[Prototype]]属性的值
var person = {};
//任何一个泛用对象，其[[Prototype]]属性始终指向Object.prototype。
var temp = Object.getPrototypeOf(person);
console.log(temp === Object.prototype); // true
  1. 也可以用 isPrototypeOf()方法检查某个对象是否是另一个对象的原型对象，该方法被包含在所有对象中
// object是一个泛用对象，它的原型是Object.prototype
var object = {};
console.log(Object.prototype.isPrototypeOf(object)); // true

当读取一个对象的属性时，JavaScript 引擎首先在该对象的自有属性中查找属性名字。如果找到则返回。如果自有属性中不包含该名字，则 JavaScript 会搜索[[Prototype]]中的对象。如果找到则返回。如果找不到，则返回 undefined。

var object = {};
console.log(object.toString()); // "[object Object]"

// 定义一个自有属性
object.toString = function() {
  return "[object Custom]";
};

console.log(object.toString()); // "[object Custom]" 自有属性会覆盖原型属性

delete object.toString; // 删除自有的属性  （delete操作符仅对自有属性起作用）
console.log(object.toString()); // "[object Object]"

// 继续删除无效-删除仅对自己的属性有效，无法删除原型属性
delete object.toString;
console.log(object.toString()); // "[object Object]"

4.2.2 在构造函数中使用原型对象

原型对象的共享机制使得它们成为一次性为所有对象定义方法的理想手段。因为一个方法对所有的对象实例做相同的事，没理由每个实例都要有一份自己的方法

function Person(name) {
  this.name = name;
}

// 被定义在原型对象上
Person.prototype.sayName = function() {
  console.log(this.name);
};
var person1 = new Person("Nicholas");
var person2 = new Person("Greg");
console.log(person1.name); // "Nicholas"
console.log(person2.name); // "Greg"
person1.sayName(); // outputs "Nicholas"
person2.sayName(); // outputs "Greg"

注意：原型对象上也可以存储引用值，这些引用值会被多个实例共享，可能大家不希望一个实例能够改变另一个实例的值 如下：

function Person(name) {
  this.name = name;
}

Person.prototype.sayName = function() {
  console.log(this.name);
};

Person.prototype.favorites = [];

var person1 = new Person("人物一");
var person2 = new Person("人物二");

person1.favorites.push("人物一追加");
person2.favorites.push("人物二追加");

console.log(person1.favorites); // [ '人物一追加', '人物二追加' ]
console.log(person2.favorites); // [ '人物一追加', '人物二追加' ]

虽然你可以在原型对象上一一添加属性，但是很多开发者会使用一种更简洁的方式：直接用一个对象字面形式替换原型对象,这种方式不需要多次键入 Person.prototype。但是有一个副作用需要注意,如下。

function Person(name) {
  this.name = name;
}

var p = new Person("cc");
console.log(p.constructor); // [Function: Person]

// 使用对象字面形式改写原型对象改变了构造函数的属性，
// 因此它现在指向Object而不是Person
Person.prototype = {
  sayName: function() {
    console.log(this.name);
  },
  toString: function() {
    return "[Person " + this.name + "]";
  }
};
var person1 = new Person("Nicholas");
// constructor属性将被置为泛用对象Object
console.log(person1.constructor); // [Function: Object]
console.log(person1 instanceof Person); // true
console.log(person1.constructor === Person); // false
console.log(person1.constructor === Object); // true

当一个函数被创建时，它的 prototype 属性也被创建，且该原型对象的 constructor 属性指向该函数
当使用对象字面形式改写原型对象 Person.prototype 时，其 constructor 属性将被置为泛用对象 Object。为了避免这一点，需要在改写原型对象时手动重置其 constructor 属性

// 手动调整原型对象的constructor属性
function Person(name) {
  this.name = name;
}

var p = new Person("cc");
console.log(p.constructor); // [Function: Person]

Person.prototype = {
  constructor: Person, // 手动重置指向问题
  sayName: function() {
    console.log(this.name);
  },
  toString: function() {
    return "[Person " + this.name + "]";
  }
};
var person1 = new Person("Nicholas");
console.log(person1.constructor); // [Function: Person]
console.log(person1 instanceof Person); // true
console.log(person1.constructor === Person); // true
console.log(person1.constructor === Object); // false

构造函数、原型对象和对象实例之间的关系最有趣的一个方面也许就是对象实例和构造函数之间没有直接联系。不过对象实例和原型对象以及原型对象和构造函数之间都有直接联系，这样的连接关系意味着，如果打断对象实例和原型对象之间的联系，那么也将打断对象实例和其构造函数的联系

4.2.3 改变原型对象

记住，[[Prototype]]属性只是包含了一个指向原型对象的指针，任何对原型对象的改变都立即反映到所有引用它的对象实例上。这意味着你给原型对象添加的新成员都可以立即被所有已经存在的对象实例使用

function Person(name) {
  this.name = name;
}

Person.prototype = {
  constuctor: Person,
  sayName: function() {
    console.log(this.name);
  },
  toString: function() {
    return "[ Person" + this.name + "]";
  }
};

var person1 = new Person("尼古拉斯111");
var person2 = new Person("尼古拉斯222");

console.log("sayHello" in person1); // false
console.log("sayHello" in person2); // false

// 创建实例之后给原型对象添加新的方法
Person.prototype.sayHello = function() {
  console.log(this.name + "说：你好");
};

console.log("sayHello" in person1); // true
console.log("sayHello" in person2); // true

// 对命名属性的查找是在每次访问属性时发生的，所以可以做到无缝体
person1.sayHello(); // 尼古拉斯111说：你好
person2.sayHello(); // 尼古拉斯222说：你好

可以以随时改变原型对象的能力在封印对象和冻结对象上有一个十分有趣的后果。当你在一个对象上使用 Object.seal()或 Object.freeze()时，完全是在操作对象的自有属性。你无法添加自有属性或改变冻结对象的自有属性，但仍然可以通过在原型对象上添加属性来扩展这些对象实例

function Person(name) {
  this.name = name;
}
Person.prototype = {
  constuctor: Person,
  sayName: function() {
    console.log(this.name);
  },
  toString: function() {
    return "[ Person" + this.name + "]";
  }
};

var person1 = new Person("Nicholas");
var person2 = new Person("Greg");
console.log(person1); // { name: 'Nicholas' }

Object.freeze(person1); // 冻结对象
person1.age = 12; // 添加新得属性age失败
console.log(person1); // { name: 'Nicholas' }

// person1实例被冻结后，继续在原型上添方法
Person.prototype.sayHello = function() {
  console.log(this.name + "说：你好");
};
// person1 和 person2 都获得了这一新方法
person1.sayHello(); // Nicholas说：你好
person2.sayHello(); // Greg说：你好

person1 是冻结对象而 person2 是普通对象。当你在原型对象上添加 sayHi()时，person1 和 person2 都获得了这一新方法，这似乎不符合 person1 的冻结状态。其实，[[Prototype]]属性是对象实例的自有属性，属性本身被冻结，但其指向的值（原型对象）并没有冻结。

4.2.4 内建对象的原型对象

所有内建对象都有构造函数，因此也都有原型对象给你去改变。例如，在所有数组上添加一个新的方法只需要简单地修改 Array.prototype 即可。

Array.prototype.sum = function() {
  return this.reduce(function(previous, current) {
    return previous + current;
  }, 0);
};

var numbers = [1, 2, 3, 4, 5, 6];
var result = numbers.sum();
console.log(result); // 21

numbers 数组通过原型对象自动拥有了这个方法。在 sum()内部，this 指向数组的对象实例 numbers，于是该方法也可以自由使用数组的其他方法，比如 reduce()。

你可能还记得字符串、数字和布尔类型都有内建的原始封装类型来帮助我们像使用普通对象一样使用它们。如果改变原始封装类型的原型对象，你就可以给这些原始值添加更多的功能，如下例

这段代码为字符串创建了一个名为 capitalize()的新方法。String 类型是字符串的原始封装类型，修改其原型对象意味着所有的字符串都自动获得这些改动。

String.prototype.capitalize = function() {
  return this.charAt(0).toUpperCase() + this.substring(1);
};

// substring 如果省略第二个参数，那么返回的子串会一直到字符串的结尾

var str = "hello world";
console.log(str.capitalize()); // Hello world

注意：在生产环境中这么做可不是一个好主意。开发者们都期望一个内建对象具有一定的方法并表现出一定的行为。故意改变内建对象会破坏这种期望并导致其他开发者无法确定这些对象会如何工作。

总结

  1. 构造函数就是用 new 操作符调用的普通函数。你可以随时定义你自己的构造函数来创建多个具有同样属性的对象。可以用instanceof操作符或直接访问 constructor 属性来鉴别对象是被哪个构造函数创建的。

  2. 每一个函数都具有 prototype 属性，它定义了该构造函数创建的所有对象共享的属性。通常，共享的方法和原始值属性被定义在原型对象里，而其他属性都定义在构造函数里。constructor 属性实际上被定义在原型对象里供所有对象实例共享。

  3. 原型对象被保存在对象实例内部的[[Prototype]]属性中。这个属性是一个引用而不是一个副本。由于 JavaScript 查找属性的机制，你对原型对象的修改都立刻出现在所有对象实例中。当你试图访问一个对象的某个属性时，JavaScript 首先在自有属性里查找该名字，如果在自有属性中没有找到则查找原型属性。这样的机制意味着原型对象可以随时改变而引用它的对象实例则立即反映出这些改变。

  4. 内建对象也有可以被修改的原型对象。虽然不建议在生产环境中这么做，但它们可以被用来做实验以及验证新功能

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 201,552评论 5赞 474
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 84,666评论 2赞 377
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 148,519评论 0赞 334
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,180评论 1赞 272
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,205评论 5赞 363
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,344评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,781评论 3赞 393
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,449评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,635评论 1赞 295
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,467评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,515评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,217评论 3赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,775评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,851评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,084评论 1赞 258
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,637评论 2赞 348
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,204评论 2赞 341

推荐阅读更多精彩内容

  • 致妈妈的一封信
    妈妈，今天是您的节日，祝您健康长寿！ 妈妈，孩儿不孝，孩儿也知道别人的妈妈孙子甚至重孙子都抱上了，孩儿...
    追求成功的实践者阅读 240评论 0赞 2
  • 炼
    01 前几天林儿一直高烧，今天终于降下来了。一直挺淡定的，在温度高达40.6度时，依然没慌里慌张去选择输水。 今天...
    i韩小鱼阅读 363评论 2赞 5
  • 白纸的回忆
    如果生命是一条河 波涛和麟纹只是调剂 而沉于河底的淤泥才是本质 那么你还会选择做一条无奈的鱼吗 如果生活是一首歌 ...
    沙清阅读 348评论 5赞 1