理一理js中令人抓狂的对象,创建对象的方式与持续的三种办法

深深解读 JavaScript 中的面向对象编程

2017/07/07 · JavaScript
·
面向对象

原稿出处: 景庄   

面向对象编程是用抽象方式创建基于现实世界模型的一种编程方式,主要不外乎模块化、多态、和包裹两种技术。
对 JavaScript
而言,其基本是援救面向对象的,同时它也提供了强压灵活的基于原型的面向对象编程能力。
正文将会深深的探赜索隐关于使用 JavaScript
进行面向对象编程的片段基本基础知识,包涵对象的始建,继承机制,
末尾还会不难的介绍怎么着依靠 ES6
提供的新的类机制重写传统的JavaScript面向对象代码。

深深解读JavaScript面向对象编程实践

2016/03/14 · JavaScript
· 4 评论 ·
面向对象

原稿出处:
景庄(@ali景庄)   

面向对象编程是用抽象方式开创基于具体世界模型的一种编程形式,首要包涵模块化、多态、和包装两种技术。对JavaScript而言,其主干是永葆面向对象的,同时它也提供了强硬灵活的按照原型的面向对象编程能力。

本文将会深深的追究关于使用JavaScript举行面向对象编程的局地焦点基础知识,包括对象的创办,继承机制,最终还会不难的牵线怎么样借助ES6提供的新的类机制重写传统的JavaScript面向对象代码。

骨子里要统计那多少个概念已经很久了,只是以前一贯都认为自己还不算完全控制,而且知识点还不够系统,所以平素拖着,然则近年来又重新看了几篇文章,自己也测试了一下,觉得始于有些清晰了,所以想在那里给协调做个总计吧,也期望在学的你们能够在那边学到一点东西。不要浮躁,逐步看,一边看一边做测试,那也是我近年的觉醒。看了不肯定会,要实在自己出手去测试一下。

1.js创造对象的二种方法

面向对象的多少个概念

在进入正题前,先精晓传统的面向对象编程(例如Java)中常会波及到的定义,大概可以包罗:

  • 类:定义对象的表征。它是目的的属性和艺术的模版定义。
  • 对象(或称实例):类的一个实例。
  • 属性:对象的性状,比如颜色、尺寸等。
  • 办法:对象的作为,比如行走、说话等。
  • 构造函数:对象初叶化的眨眼之间间被调用的法子。
  • 此起彼伏:子类可以接二连三父类的特征。例如,猫继承了动物的形似特性。
  • 包装:一种把多少和有关的艺术绑定在同步行使的艺术。
  • 空泛:结合复杂的持续、方法、属性的对象可以模拟现实的模子。
  • 多态:分歧的类可以定义相同的法门或性能。

在 JavaScript
的面向对象编程中差不多也包罗这几个。但是在名为上恐怕稍有例外,例如,JavaScript
中并未原生的“类”的定义,
而只有对象的概念。因而,随着你认识的深透,我们会混用对象、实例、构造函数等概念。

面向对象的多少个概念

在进入正题前,先了然传统的面向对象编程(例如Java)中常会波及到的概念,大约可以包涵:

  • 类:定义对象的特色。它是目的的性质和措施的模板定义。
  • 目的(或称实例):类的一个实例。
  • 性能:对象的特性,比如颜色、尺寸等。
  • 艺术:对象的一颦一笑,比如行走、说话等。
  • 构造函数:对象先河化的一须臾间被调用的点子。
  • 一连:子类可以继承父类的风味。例如,猫继承了动物的一般特性。
  • 打包:一种把数据和连锁的方式绑定在一起使用的格局。
  • 空洞:结合复杂的后续、方法、属性的目的能够模拟现实的模型。
  • 多态:分化的类可以定义相同的章程或性能。

在JavaScript的面向对象编程中差不离也包罗那些。不过在名为上也许稍有分歧,例如,JavaScript中绝非原生的“类”的定义,
而只有对象的概念。因此,随着你认识的递进,大家会混用对象、实例、构造函数等概念。

怎么着是目的?

自身的掌握就是那是一个存储灌,你可以在里边储存任何东西,这么些东西就是我们事先学的种种js里面的数据类型,然后给每一个名字贴上一个名字,方便大家今后找到。

例子:

//这个myFirstObject里面有两个属性,分别是firstName和 favoriteAuthor
var myFirstObject = {firstName: "Richard", favoriteAuthor: "Conrad"};

工厂情势

对象(类)的创建

在JavaScript中,大家见惯司空可以使用构造函数来创建特定项目标指标。诸如
Object 和 Array
那样的原生构造函数,在运作时会自动出现在履行环境中。其它,大家也可以创设自定义的构造函数。例如:

JavaScript

function Person(name, age, job) { this.name = name; this.age = age;
this.job = job; } var person1 = new Person(‘Weiwei’, 27, ‘Student’); var
person2 = new Person(‘Lily’, 25, ‘Doctor’);

1
2
3
4
5
6
7
function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
}
var person1 = new Person(‘Weiwei’, 27, ‘Student’);
var person2 = new Person(‘Lily’, 25, ‘Doctor’);

遵从常规,构造函数始终都应有以一个大写字母开首(和Java中定义的类一样),普通函数则小写字母开始。
要创建 Person 的新实例,必须运用
new
操作符。
以那种方法调用构造函数实际上会经历以下4个步骤:

  1. 创设一个新目的(实例)
  2. 将构造函数的效应域赋给新目的(也就是重设了this的指向,this就对准了这几个新目的)
  3. 履行构造函数中的代码(为那一个新对象添加属性)
  4. 回去新目标

在地点的例证中,大家创造了 Person 的五个实例 person1person2

那七个目的默许都有一个 constructor 属性,该属性指向它们的布局函数
Person,也就是说:

JavaScript

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

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

对象(类)的创建

在JavaScript中,大家日常可以使用构造函数来创建特定项目标靶子。诸如Object和Array那样的原生构造函数,在运转时会自动出现在进行环境中。
除此以外,大家也能够成立自定义的构造函数。例如:

function Person(name, age, job) { this.name = name; this.age = age;
this.job = job; } var person1 = new Person(‘Weiwei’, 27, ‘Student’); var
person2 = new Person(‘Lily’, 25, ‘Doctor’);

1
2
3
4
5
6
7
8
function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
}
 
var person1 = new Person(‘Weiwei’, 27, ‘Student’);
var person2 = new Person(‘Lily’, 25, ‘Doctor’);

安分守己惯例,构造函数始终都应该以一个大写字母起头(和Java中定义的类一样),普通函数则小写字母开端。
要创建Person的新实例,必须运用new操作符。以那种方法调用构造函数实际上会经历以下4个步骤:

  1. 创制一个新目标(实例)
  2. 将构造函数的效率域赋给新目标(也就是重设了this的指向,this就本着了这些新对象)
  3. 举办构造函数中的代码(为那些新对象添加属性)
  4. 回去新目的

有关new操作符的更加多内容请参考那篇文档。

在上面的事例中,大家创立了Person的七个实例person1person2
那些目的默许都有一个constructor性能,该属性指向它们的构造函数Person,也就是说:

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

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

怎样定义一个目的?

  • 对象字面量
  • 构造函数创立
  • 原型格局开创

何以会生出工厂格局,原因是利用同一个接口创立很多对象,会时有暴发大批量的再一次代码,为了缓解那个问题,发生了工厂情势。

自定义对象的品类检测

俺们可以动用instanceof操作符进行项目检测。大家创造的拥有目的既是Object的实例,同时也是Person的实例。
因为有着的目标都三番一次自Object

JavaScript

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

1
2
3
4
console.log(person1 instanceof Object);  //true
console.log(person1 instanceof Person);  //true
console.log(person2 instanceof Object);  //true
console.log(person2 instanceof Person);  //true

自定义对象的类型检测

咱俩得以使用instanceof操作符举行项目检测。大家创立的装有目的既是Object的实例,同时也是Person的实例。
因为具有的靶子都无冕自Object

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

1
2
3
4
console.log(person1 instanceof Object);  //true
console.log(person1 instanceof Person);  //true
console.log(person2 instanceof Object);  //true
console.log(person2 instanceof Person);  //true
对象字面量创造对象

那是最原始的主意,可是也不便利前边的七个对象的创导。

//这是一个mango对象,这个对象里面有color shape sweetness属性以及一个​howSweetAmI的方法
​var mango = {
color: "yellow",
shape: "round",
sweetness: 8,
​
​howSweetAmI: function () {
console.log("Hmm Hmm Good");
}
}

function createPerson(name,age,job){

构造函数的题目

我们不指出在构造函数中一向定义方法,若是如此做的话,每个方法都要在每个实例上再也创制两遍,那将至极损耗性能。
——不要忘了,ECMAScript中的函数是目的,每定义一个函数,也就实例化了一个对象。

侥幸的是,在ECMAScript中,大家可以依靠原型对象来解决这么些题材。

构造函数的问题

我们不指出在构造函数中间接定义方法,若是那样做的话,每个方法都要在种种实例上重复创造一遍,那将那么些损耗性能。
——不要忘了,ECMAScript中的函数是目的,每定义一个函数,也就实例化了一个目的。

有幸的是,在ECMAScript中,大家得以依靠原型对象来化解那个题目。

缺陷:那种格局尽管简单明了,可是试想一下,要是大家要定义各样种种的瓜果对象,每一个水果都有color shape sweetnees的习性,大家都要一个个概念是或不是会稍为劳苦呢?

这看看上边那种构造函数的创制方法

    var o=new Object();

凭借原型格局定义对象的法子

我们成立的各种函数都有一个prototype性能,那些特性是一个指南针,指向该函数的原型对象
该对象涵盖了由特定项目标所有实例共享的属性和措施。也就是说,大家得以运用原型对象来让所有目标实例共享它所富含的特性和办法。

JavaScript

function Person(name, age, job) { this.name = name; this.age = age;
this.job = job; } // 通过原型情势来拉长所有实例共享的办法 // sayName()
方法将会被Person的兼具实例共享,而防止了再度创造Person.prototype.sayName = function () { console.log(this.name); }; var
person1 = new Person(‘Weiwei’, 27, ‘Student’); var person2 = new
Person(‘Lily’, 25, ‘Doctor’); console.log(person1.sayName ===
person2.sayName); // true person1.sayName(); // Weiwei
person2.sayName(); // 莉莉

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
}
// 通过原型模式来添加所有实例共享的方法
// sayName() 方法将会被Person的所有实例共享,而避免了重复创建
Person.prototype.sayName = function () {
  console.log(this.name);
};
var person1 = new Person(‘Weiwei’, 27, ‘Student’);
var person2 = new Person(‘Lily’, 25, ‘Doctor’);
console.log(person1.sayName === person2.sayName); // true
person1.sayName(); // Weiwei
person2.sayName(); // Lily

正如上边的代码所示,通过原型情势定义的法子sayName()为所有的实例所共享。也就是,
person1person2访问的是同一个sayName()函数。同样的,公共属性也可以选取原型情势开展定义。例如:

JavaScript

function Chinese (name) { this.name = name; } Chinese.prototype.country
= ‘China’; // 公共属性,所有实例共享

1
2
3
4
function Chinese (name) {
    this.name = name;
}
Chinese.prototype.country = ‘China’; // 公共属性,所有实例共享

当我们new Person()时,返回的Person实例会构成构造函数中定义的习性、行为和原型中定义的习性、行为,
转变最后属于Person实例的性质和表现。

构造函数中定义的属性和行事的优先级要比原型中定义的性能和行为的预先级高,假设构造函数和原型中定义了同名的习性或作为,
构造函数中的属性或行为会覆盖原型中的同名的性质或作为。

依赖原型情势定义对象的格局

我们创制的每个函数都有一个prototype性能,那个特性是一个指针,指向该函数的原型对象
该对象涵盖了由特定类型的具有实例共享的属性和措施。也就是说,大家得以行使原型对象来让具有目的实例共享它所包罗的属性和办法。

function Person(name, age, job) { this.name = name; this.age = age;
this.job = job; } // 通过原型情势来增加所有实例共享的法子 // sayName()
方法将会被Person的享有实例共享,而防止了再也创制Person.prototype.sayName = function () { console.log(this.name); }; var
person1 = new Person(‘Weiwei’, 27, ‘Student’); var person2 = new
Person(‘莉莉’, 25, ‘Doctor’); console.log(person1.sayName ===
person2.sayName); // true person1.sayName(); // Weiwei
person2.sayName(); // 莉莉

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
}
 
// 通过原型模式来添加所有实例共享的方法
// sayName() 方法将会被Person的所有实例共享,而避免了重复创建
Person.prototype.sayName = function () {
  console.log(this.name);
};
 
var person1 = new Person(‘Weiwei’, 27, ‘Student’);
var person2 = new Person(‘Lily’, 25, ‘Doctor’);
 
console.log(person1.sayName === person2.sayName); // true
 
person1.sayName(); // Weiwei
person2.sayName(); // Lily

正如下面的代码所示,通过原型形式定义的方法sayName()为具有的实例所共享。也就是,
person1person2做客的是同一个sayName()函数。同样的,公共性质也足以使用原型形式展开定义。例如:

function Chinese (name) { this.name = name; } Chinese.prototype.country
= ‘China’; // 公共性质,所有实例共享

1
2
3
4
5
function Chinese (name) {
    this.name = name;
}
 
Chinese.prototype.country = ‘China’; // 公共属性,所有实例共享

设想用构造函数的创导方法

构造函数创制方法,就是概念一个构造函数,然后在中间安装属性和办法值,然后再用new去实例化对象,所有实例化的靶子都会有构造函数里面的性质和措施。

//在这里定义一个构造函数,在构造函数里面定义属性和方法,注意这里需要用this,后面就可以通过new来实例化对象,使用new的时候,就会将this指向这个实例化的对象。

function Fruit (theColor, theSweetness, theFruitName, theNativeToLand) {
​    this.type = "水果"
    this.color = theColor;
    this.sweetness = theSweetness;
    this.fruitName = theFruitName;
    this.nativeToLand = theNativeToLand;
​
    this.showName = function () {
        console.log("This is a " + this.fruitName);
    }
​
    this.nativeTo = function () {
    this.nativeToLand.forEach(function (eachCountry)  {
       console.log("Grown in:" + eachCountry);
        });
    }

}

    o.name=name;

原型对象

现在大家来深切的驾驭一下怎么是原型对象。

设若创设了一个新函数,就会基于一组特定的条条框框为该函数创制一个prototype属性,那一个特性指向函数的原型对象。
在默许情形下,所有原型对象都会自行获取一个constructor属性,这么些特性蕴含一个对准prototype特性所在函数的指针。
也就是说:Person.prototype.constructor指向Person构造函数。

创造了自定义的构造函数之后,其原型对象默许只会赢得constructor属性;至于其余措施,则都是从Object继续而来的。
当调用构造函数创立一个新实例后,该实例之中将包罗一个指针(内部属性),指向构造函数的原型对象。ES5中称这些指针为[[Prototype]]
在Firefox、Safari和Chrome在各类对象上都协理一个特性__proto__(近年来已被屏弃);而在其余达成中,这一个特性对台本则是全然不可知的。
要注意,那几个链接存在于实例与构造函数的原型对象时期,而不是实例与构造函数之间

这三者关系的示意图如下:

亚洲必赢官网 1

上图体现了Person构造函数、Person的原型对象以及Person幸存的三个实例之间的关联。

  • Person.prototype本着了原型对象
  • Person.prototype.constructor又指回了Person构造函数
  • Person的各类实例person1person2都包涵一个里边属性(平日为__proto__),person1.__proto__person2.__proto__针对了原型对象

原型对象

现行我们来深刻的明白一下什么样是原型对象。

万一创制了一个新函数,就会基于一组特定的条条框框为该函数成立一个prototype性能,那么些特性指向函数的原型对象。
在默许情状下,所有原型对象都会自行获取一个constructor属性,这一个特性包涵一个对准prototype特性所在函数的指针。
也就是说:Person.prototype.constructor指向Person构造函数。

成立了自定义的构造函数之后,其原型对象默许只会得到constructor属性;至于其余措施,则都是从Object此起彼伏而来的。
当调用构造函数创制一个新实例后,该实例之司令员包涵一个指针(内部属性),指向构造函数的原型对象。ES5中称那一个指针为[[Prototype]]
在Firefox、Safari和Chrome在各种对象上都协理一个特性__proto__(如今已被放弃);而在其余完结中,这一个特性对台本则是全然不可知的。
要注意,本条链接存在于实例与构造函数的原型对象期间,而不是实例与构造函数之间

那三者关系的示意图如下:

亚洲必赢官网 2

上图显示了Person构造函数、Person的原型对象以及Person现有的几个实例之间的关联。

  • Person.prototype针对了原型对象
  • Person.prototype.constructor又指回了Person构造函数
  • Person的各种实例person1person2都包涵一个里边属性(经常为__proto__),person1.__proto__person2.__proto__本着了原型对象

接下去,我们就可以直接用new的法子来创制各样各个的果品对象了。

//创建一个芒果的对象。
var mangoFruit = new Fruit ("Yellow", 8, "Mango", ["South America", "Central America", "West Africa"]);
mangoFruit.showName(); // This is a Mango.​
mangoFruit.nativeTo();
​//Grown in:South America​
​// Grown in:Central America​
​// Grown in:West Africa​
​
//创建一个pineappleFruit的对象。
​var pineappleFruit = new Fruit ("Brown", 5, "Pineapple", ["United States"]);
pineappleFruit.showName(); // This is a Pineapple.

是否很有益,可以把构造函数想象成一个大工厂,然后你固然采纳new的艺术去调用那么些工厂,就一定于告诉那些工厂给我生产一个事物出来,那么那一个工厂就会用所有自己有些设备,把它有着的事物能生育的都生产出来。所以即使在那一个工厂上的装备能添丁出来的都会被生产。

再来思考一个问题,那个实例化对象之间是还是不是实际都是有相似性的,就是你可以提炼出其中同样的特性和格局。像下边万分例子,所有水果的type属性和showName方法是或不是都是同样的呢?那大家是否可以用原型来写?

    o.age=age;

搜索对象属性

从上图我们发现,固然Person的几个实例都不带有属性和措施,但大家却得以调用person1.sayName()
那是通过寻找对象属性的进度来兑现的。

  1. 摸索首先从目的实例自己开首(实例person1sayName属性吗?——没有)
  2. 即使没找到,则连续搜寻指针指向的原型对象person1.__proto__sayName属性吗?——有)

那也是多个目标实例共享原型所保存的特性和方法的基本原理。

在意,假使大家在目标的实例中重写了某个原型中已存在的习性,则该实例属性会屏蔽原型中的那几个属性。
那时候,可以采纳delete操作符删除实例上的习性。

摸索对象属性

从上图大家发现,即便Person的四个实例都不分包属性和措施,但大家却可以调用person1.sayName()
那是经过搜寻对象属性的进度来落成的。

  1. 摸索首先从目标实例自家先导(实例person1sayName属性吗?——没有)
  2. 即使没找到,则继续搜寻指针指向的原型对象person1.__proto__sayName属性吗?——有)

那也是多个对象实例共享原型所保存的习性和格局的基本原理。

注意,即使我们在目的的实例中重写了某个原型中已存在的习性,则该实例属性会屏蔽原型中的那多少个属性。
那时,可以行使delete操作符删除实例上的性质。

怎么样是原型?prototype

js中每一个函数都会有自己的一个原型对象,这些原型对象叫做prototype.而颇具通过那么些构造函数实例化的对象都会指向这么些原型。其实您可以考虑一下,构造函数是工厂的话,原型其实是还是不是可以是堆栈,所有实例化的对象就足以从仓库里面拿东西。所以大家得以把具备目的公用的性质和格局给放在prototype上面,那样就可以防止属性和办法的重新定义。上边用一个例证和图来说圣元(Synutra)下。

//这里我们使用原型来创建对象,所有对象共用的属性和方法就放在prototype上。
function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
}

// 通过原型模式来添加所有实例共享的方法
// sayName() 方法将会被Person的所有实例共享,而避免了重复创建
Person.prototype.sayName = function () {
  console.log(this.name);
};

var person1 = new Person('Weiwei', 27, 'Student');
var person2 = new Person('Lily', 25, 'Doctor');
person1.sayName(); // Weiwei
person2.sayName(); // Lily

实例化的对象中的name age
job属性是从构造函数那得到的,而实例化的目的的原型指向了构造函数的原型对象,所以也会有sayName方法。

image.png

//注意,那里是出口true,所以其实person1和person2的sayName方法都是同一个,来自同一个地址。

console.log(person1.sayName === person2.sayName); // true

    o.job=job;

Object.getPrototypeOf()

根据ECMAScript标准,someObject.[[Prototype]] 符号是用于指派
someObject 的原型。
以此等同于 JavaScript 的 __proto__
属性(现已弃用,因为它不是明媒正娶)。
从ECMAScript 5开始, [[Prototype]]
可以用Object.getPrototypeOf()Object.setPrototypeOf()做客器来访问。

其中Object.getPrototypeOf()在所有援助的兑现中,这么些措施再次来到[[Prototype]]的值。例如:

JavaScript

person1.__proto__ === Object.getPrototypeOf(person1); // true
Object.getPrototypeOf(person1) === Person.prototype; // true

1
2
person1.__proto__ === Object.getPrototypeOf(person1); // true
Object.getPrototypeOf(person1) === Person.prototype; // true

也就是说,Object.getPrototypeOf(p1)回来的靶子实际就是以此目的的原型。
以此办法的包容性请参考该链接)。

Object.getPrototypeOf()

根据ECMAScript标准,someObject.[[Prototype]] 符号是用于指派
someObject 的原型。
其一等同于 JavaScript 的 __proto__ 属性(现已弃用)。
从ECMAScript 5开始, [[Prototype]]
可以用Object.getPrototypeOf()Object.setPrototypeOf()做客器来访问。

其中Object.getPrototypeOf()在有着帮忙的落实中,这几个点子重临[[Prototype]]的值。例如:

person1.__proto__ === Object.getPrototypeOf(person1); // true
Object.getPrototypeOf(person1) === Person.prototype; // true

1
2
person1.__proto__ === Object.getPrototypeOf(person1); // true
Object.getPrototypeOf(person1) === Person.prototype; // true

也就是说,Object.getPrototypeOf(p1)归来的目的实际就是以此目标的原型。
其一法子的兼容性请参考该链接)。

小小的总计一下:

对象有三种不相同的开创情势,对象字面量,构造函数,结合原型来创立,最实用的也就是第二种成立格局了,避免同一属性和艺术的重复成立,所以可以将目的公用
的性能和方式定义在prototype上。

    o.sayName=function(){

Object.keys()

要拿走对象上所有可枚举的实例属性,可以选拔ES5中的Object.keys()方法。例如:

JavaScript

Object.keys(p1); // [“name”, “age”, “job”]

1
Object.keys(p1); // ["name", "age", "job"]

除此以外,要是你想要获得所有实例属性,无论它是或不是可枚举,都得以采取Object.getOwnPropertyName()方法。

Object.keys()

要博取对象上所有可枚举的实例属性,可以动用ES5中的Object.keys()方法。例如:

Object.keys(p1); // [“name”, “age”, “job”]

1
Object.keys(p1); // ["name", "age", "job"]

此外,如若您想要得到所有实例属性,无论它是还是不是可枚举,都足以利用Object.getOwnPropertyName()方法。

!!!!注意!!!!

设若使用原型继承的话,如若有七个目标和总体性要同时一头定义的话,要求注意将原型prototype的constructor属性重新赋值,是或不是听不懂了,别急,先看率先个例证,再看大家前边革新的。

例子1

//这是我们定义水果的属性和方法
function Fruit () {
​
}
​//一个一个使用Fruit.prototype来一一定义各个属性和方法。
Fruit.prototype.color = "Yellow";
Fruit.prototype.sweetness = 7;
Fruit.prototype.fruitName = "Generic Fruit";
Fruit.prototype.nativeToLand = "USA";
​
Fruit.prototype.showName = function () {
console.log("This is a " + this.fruitName);
}
​
Fruit.prototype.nativeTo = function () {
            console.log("Grown in:" + this.nativeToLand);
}

地点的法门纵然也是卓有成效的,不过假诺属性和章程太多以来,是还是不是太低效了。

更简便易行的原型创设方法:

function Fruit () {
​
}
​//一个一个使用Fruit.prototype来一一定义各个属性和方法。
Fruit.prototype= {
//这里一定要将prototype的constructor属性重新指向Fruit。因为我们这样相当于是重写了prototype的值。
constructor: Fruit,
color = "Yellow";
sweetness = 7;
fruitName = "Generic Fruit";
showName = function () {
console.log("This is a " + this.fruitName);
}
nativeTo = function () {
            console.log("Grown in:" + this.nativeToLand);
}
}

地点的事例看懂了吧?就是每一个构造函数的prototype属性都会自带有一个constructor属性,这一个constructor属性又针对了构造函数,所以大家像下边那样定义的时候,也要将以此constructor属性给重新指向构造函数。(可以重复看一下地点我付诸的百般图)

    console.log(this.name);

更简便易行的原型语法

在上头的代码中,借使大家要添加原型属性和章程,就要重复的敲三回Person.prototype。为了减小那几个重复的经过,
更宽泛的做法是用一个含有所有属性和措施的对象字面量来重写整个原型对象。
参考资料。

JavaScript

function Person(name, age, job) { this.name = name; this.age = age;
this.job = job; } // 重写整个原型对象 Person.prototype = { //
那里不可不要双重将构造函数指回Person构造函数,否则会指向那个新创建的对象
constructor: Person, // Attention! sayName: function () {
console.log(this.name); } }; var person1 = new Person(‘Weiwei’, 27,
‘Student’); var person2 = new Person(‘Lily’, 25, ‘Doctor’);
console.log(person1.sayName === person2.sayName); // true
person1.sayName(); // Weiwei person2.sayName(); // Lily

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
}
// 重写整个原型对象
Person.prototype = {
  
  // 这里务必要重新将构造函数指回Person构造函数,否则会指向这个新创建的对象
  constructor: Person, // Attention!
  sayName: function () {
    console.log(this.name);
  }
};
var person1 = new Person(‘Weiwei’, 27, ‘Student’);
var person2 = new Person(‘Lily’, 25, ‘Doctor’);
console.log(person1.sayName === person2.sayName); // true
person1.sayName();  // Weiwei
person2.sayName();  // Lily

在上边的代码中专门包涵了一个constructor性能,并将它的值设置为Person,从而有限支撑了通过该属性可以访问到格外的值。
在意,以那种办法重设constructor特性会导致它的[[Enumerable]]特性设置为true。默许境况下,原生的constructor性能是比比皆是的。
你能够采纳Object.defineProperty()

JavaScript

// 重设构造函数,只适用于ES5非凡的浏览器
Object.defineProperty(Person.prototype, “constructor”, { enumerable:
false, value: Person });

1
2
3
4
5
// 重设构造函数,只适用于ES5兼容的浏览器
Object.defineProperty(Person.prototype, "constructor", {
  enumerable: false,
  value: Person
});

更简约的原型语法

在上边的代码中,假如大家要添加原型属性和艺术,就要重复的敲一回Person.prototype。为了削减这几个重复的进度,
更常见的做法是用一个带有所有属性和形式的靶子字面量来重写整个原型对象。
参考资料。

理一理js中令人抓狂的对象,创建对象的方式与持续的三种办法。function Person(name, age, job) { this.name = name; this.age = age;
this.job = job; } Person.prototype = { //
那里不可不要重复将构造函数指回Person构造函数,否则会指向那一个新创设的目的constructor: Person, // Attention! sayName: function () {
console.log(this.name); } }; var person1 = new Person(‘Weiwei’, 27,
‘Student’); var person2 = new Person(‘Lily’, 25, ‘Doctor’);
console.log(person1.sayName === person2.sayName); // true
person1.sayName(); // Weiwei person2.sayName(); // Lily

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function Person(name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
}
 
Person.prototype = {
 
  // 这里务必要重新将构造函数指回Person构造函数,否则会指向这个新创建的对象
  constructor: Person, // Attention!
 
  sayName: function () {
    console.log(this.name);
  }
};
 
var person1 = new Person(‘Weiwei’, 27, ‘Student’);
var person2 = new Person(‘Lily’, 25, ‘Doctor’);
 
console.log(person1.sayName === person2.sayName); // true
 
person1.sayName();  // Weiwei
person2.sayName();  // Lily

在上头的代码中专门包括了一个constructor特性,并将它的值设置为Person,从而确保了经过该属性可以访问到适当的值。
留意,以那种艺术重设constructor性能会造成它的[[Enumerable]]特点设置为true。默许意况下,原生的constructor属性是无独有偶的。
您可以利用Object.defineProperty()

// 重设构造函数,只适用于ES5万分的浏览器
Object.defineProperty(Person.prototype, “constructor”, { enumerable:
false, value: Person });

1
2
3
4
5
// 重设构造函数,只适用于ES5兼容的浏览器
Object.defineProperty(Person.prototype, "constructor", {
  enumerable: false,
  value: Person
});

怎么读取对象的性能:

// We have been using dot notation so far in the examples above, here is another example again:​
​var book = {title: "Ways to Go", pages: 280, bookMark1:"Page 20"};
​
​// To access the properties of the book object with dot notation, you do this:​
console.log ( book.title); // Ways to Go​
console.log ( book.pages); // 280


//当然,也可以用方括号来写:
console.log ( book["title"]); //Ways to Go​
console.log ( book["pages"]); // 280​

   }

整合使用构造函数方式和原型形式

开创自定义类型的最常见方式,就是整合使用构造函数方式与原型格局。构造函数形式用于定义实例属性,
而原型格局用于定义方法和共享的性能。结果,每个实例都会有友好的一份实例属性的副本,但还要又共享着对方的引用,
最大限度的节约了内存。

重组使用构造函数形式和原型格局

创造自定义类型的最普遍方法,就是组成使用构造函数格局与原型方式。构造函数情势用于定义实例属性,
而原型方式用于定义方法和共享的性能。结果,每个实例都会有投机的一份实例属性的副本,但还要又共享着对方的引用,
最大限度的节约了内存。

怎么已毕目标的继续:

  • 原型继承
  • 构造函数继承
  • 原型和构造函数继承
  • 创设空对象方法

原型继承:

  • 构造函数都有一个针对原型对象的指针
  • 原型对象都有一个针对性构造函数的constructor
  • 实例化对象都有一个对准原型的[[prototype]]属性

function Father () {
  this.fatherValue = true;
}

Father.prototype.getFatherValue = function () {
  console.log(this.fatherValue);
};

function Child () {
  this.childValue = false;
}

// 实现继承:继承自Father
Child.prototype = new Father();

Child.prototype.getChildValue = function () {
  console.log(this.childValue);
};

var instance = new Child();
instance.getFatherValue(); // true
instance.getChildValue();  // false

地点的关键点就是用“`Child.prototype = new Father();

![image.png](http://upload-images.jianshu.io/upload_images/5763769-c4014978c0314834.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

可以看一下这一个原型链的一个搜索的过程:

var instance = new Child();
instance.getFatherValue(); // true
instance.getChildValue(); // false

当我们查找```instance.getFatherValue(); ```的时候,是如何一个查找的过程呢?

- 先看一下instance 实例上有没有,没有则继续
- Chile prototype上查找有没有,也没有该方法,则继续向上查找
- 向上查找的是Father prototype的属性和方法,查找到了,则输出。

>这种原型继承的方法,其实就相当于延长了Child的原型链,因为其原型现在又可以再向上查找到Father的原型,相当于延长原型链之后可以继续再向上去查找到Father原型上的属性和方法。

#####思考一下:这其实也给了我们一个提示,如果实例,原型上有相同的方法的话,我们一般读取该属性的时候,也是直接读取到了实例上的属性和方法,除非实例本身没有,才会继续往上查找。

####缺点:
这个方法其实也是有缺点的,因为Child的实例化对象的一些属性和方法都是在该原型链上查找的,所以一些引用值得修改也会影响到所有实例化对象的属性,先看个例子。

function father(name,age) {
this.name = name
this.age = age
this.friends = [“lili”,”koko”]
}
father.prototype.sayname = function () {
console.log(this.name)
}
function children(school) {
this.school = school
}
children.prototype = new father()
children.prototype.sayname = function () {
console.log(“我就是不说自己的名字”)
}
var instance = new children(“幼儿园”)
var instance2 = new children(“幼儿园”)
//那里大家修改了instance的friends的值
instance.friends.push(“yoyo”)
//大家输出children的四个实例对象试一下,看看三个的属性值的区分
console.log(instance)
console.log(instance2)

![instance的输出.png](http://upload-images.jianshu.io/upload_images/5763769-2bbc0a638ee61a39.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

![instance2的输出.png](http://upload-images.jianshu.io/upload_images/5763769-b2e3d6d0c8f39176.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

其实从上面两个图也可以发现,一旦修改了一个实例对象上的一个引用值,其他实例化对象的属性值也跟着变化了。因为这里的friends是引用类型的数据,所有的实例都会共享这个属性值,一旦修改其他也跟着修改了。

####构造函数继承

function Animal(){
    this.species = “动物”;
  }
Animal.prototype.say = function(){console.log(“hahaha”)}
 function Cat(name,color){
//那里运用的是构造函数的存续,调用Animal构造函数,再用apply将this指向Cat本身
    Animal.apply(this, arguments);
    this.name = name;
    this.color = color;
  }
  var cat1 = new Cat(“大毛”,”黄色”);
  alert(cat1.species); // 动物
//那样的话Cat的实例化对象就都有Animal的性质了。

>//Cat这个实例化对象就有Animal的属性,但是不会继承来自于Animal原型上的方法。

![image.png](http://upload-images.jianshu.io/upload_images/5763769-49c23d31a71c5e79.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

>构造函数的好处是可以在调用的时候输入参数,```Animal.apply(this, arguments);
```这里可以重新将Cat的参数赋值给Animal中的构造函数。但是这样其实还是有不好之处就是每次新生成一个实例化对象的时候,就会调用一次构造函数。除此之外,Cat并不能继承来自于Animal原型上的方法,这不能实现方法上的复用。

所以,我们可以考虑结合原型方法和构造函数方法。

刚刚是不是说到,只使用原型方法的话,继承父类的所有属性和方法,但是所有实例没有自己的属性,可能会因为一个实例的属性的更改而影响到其他实例;而构造函数的方法只能实现构造函数内的属性方法继承,不能实现父类原型上的继承;;

那就结合这两种方法来实现以下;

// 父类构造函数
function Person (name, age, job) {
this.name = name;
this.age = age;
this.job = job;
}

// 父类方法
Person.prototype.sayName = function () {
console.log(this.name);
};

// ————–

// 子类构造函数
function Student (name, age, job, school) {
// 继承父类的有着实例属性(获得父类构造函数中的属性)
Person.call(this, name, age, job);
this.school = school; // 添加新的子类属性
}

// 继承父类的原型方法(得到父类原型链上的特性和措施)
Student.prototype = new Person();

// 新增的子类方法
Student.prototype.saySchool = function () {
console.log(this.school);
};

var person1 = new Person(‘Weiwei’, 27, ‘Student’);
var student1 = new Student(‘Lily’, 25, ‘Doctor’, “Southeast
University”);

console.log(person1.sayName === student1.sayName); // true

person1.sayName(); // Weiwei
student1.sayName(); // Lily
student1.saySchool(); // Southeast University

![image.png](http://upload-images.jianshu.io/upload_images/5763769-508d69653dfb5c9f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

这个就是比较好的继承方法,将父类的属性继承过来,所有的实例都有自己的属性,同时将原型上的方法也继承过来,实现所有实例都有公共的属性和方法。当然,细心的你也许已经发现了,就是这个Student子类的原型上除了有saySchool方法之外,还有父类构造函数内的那些name job age属性,那是因为我们是使用```Student.prototype = new Person();```来实现继承的,所以该原型实际上就是Person的实例;

所以其实这个方法虽然是好,但是也会出现这样一个情况,属性的覆盖,原型上还有对应父类的属性。这也不是我们最初想要的结果。

所以,我们又引入了另外一个方法

####利用中间空对象的方法继承。
>什么意思呢?我们上面的结合原型和构造函数的方法之所以会出现原型上还有相同的属性的问题是因为,我们用```Student.prototype = new Person();```来实现继承,相当于把Student.prototype重新赋值成Person的实例了,我们就肯定会有Person 构造函数上的属性和原型上的方法。那么我们要的最理想的状态就是用```Student.prototype = new Person();```的时候,Person的构造函数上没有属性,但是这显然不够理智,那么我们就可以引入一个中间的空对象,来实现继承。
啊啊啊,还是看例子吧。

//借使那规范的话,是或不是很周详,Child的原型是F的一个实例,而F的构造函数大家是设置成空的。
var F = function(){};
F.prototype = Parent.prototype;
Child.prototype = new F();

>所以我们可以用这样的方式来封装起来以后可以使用‘

//那一个就是Child继承Parent的不二法门。
function extend(Child, Parent) {
    var F = function(){};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
    Child.uber = Parent.prototype;
  }

我们再来写个例子吧;

// 父类构造函数
function Person (name, age, job) {
this.name = name;
this.age = age;
this.job = job;
}

// 父类方法
Person.prototype.sayName = function () {
console.log(this.name);
};

// ————–

// 子类构造函数
function Student (name, age, job, school) {
// 继承父类的具备实例属性(得到父类构造函数中的属性)
Person.call(this, name, age, job);
this.school = school; // 添加新的子类属性
}

function extend(Child, Parent) {
    var F = function(){};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
    Child.uber = Parent.prototype;
  }
extend( Student,Person);
//调用该格局,完结持续父类原型链上的属性和方法;

// 新增的子类方法
Student.prototype.saySchool = function () {
console.log(this.school);
};

var person1 = new Person(‘Weiwei’, 27, ‘Student’);
var student1 = new Student(‘Lily’, 25, ‘Doctor’, “Southeast
University”);

console.log(person1.sayName === student1.sayName); // true

person1.sayName(); // Weiwei
student1.sayName(); // Lily
student1.saySchool(); // Southeast University
console.log(student1)

![image.png](http://upload-images.jianshu.io/upload_images/5763769-e762216f5426ad1e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

>这样继承是不是好多了,至少跟前面的例子相比,我们的原型链上不会再继承来自父类上的属性;



>后面还有方法会继续总结的,今天先写到这里好了,感觉自己写的过程真的会发现很不一样,也算是了解多了一些。


参考链接:
http://javascriptissexy.com/javascript-objects-in-detail/#
http://javascriptissexy.com/javascript-prototype-in-plain-detailed-language/#
http://javascriptissexy.com/oop-in-javascript-what-you-need-to-know/#
http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.html

  return o;

继承

大抵的面向对象语言都协理三种持续方式:接口继承和促成延续。ECMAScript只帮助促成持续,而且其落实三番五次重要借助原型链来达成。

面前大家精通,JavaScript中实例的性质和行为是由构造函数和原型两有些联合组成的。假如大家想让Child继承Father
那就是说我们就须求把Father构造函数和原型中属性和行事全体传给Child的构造函数和原型。

继承

基本上的面向对象语言都帮助三种持续方式:接口继承和兑现持续。ECMAScript只帮助落到实处接二连三,而且其完成再三再四紧要信赖原型链来达成。

}

原型链继承

行使原型链作为落实三番五次的大旨思维是:利用原型让一个引用类型继承另一个引用类型的性质和章程。首先我们先想起一些基本概念:

  • 每个构造函数都有一个原型对象(prototype
  • 原型对象涵盖一个对准构造函数的指针(constructor
  • 实例都蕴涵一个对准原型对象的其中指针([[Prototype]]

若是大家让原型对象等于另一个类型的落到实处,结果会怎样?分明,那儿的原型对象将富含一个针对性另一个原型的指针
相应的,另一个原型中也饱含着一个针对另一个构造函数的指针。若是另一个原型又是另一个门类的实例,那么上述提到照旧成立,
这么罕见递进,就重组了实例与原型的链子。
更详尽的情节可以参照本条链接。
先看一个简单的例证,它以身作则了采用原型链完结持续的中央框架:

JavaScript

function Father () { this.fatherValue = true; }
Father.prototype.getFatherValue = function () {
console.log(this.fatherValue); }; function Child () { this.childValue =
false; } // 已毕持续:继承自Father Child.prototype = new Father();
Child.prototype.getChildValue = function () {
console.log(this.childValue); }; var instance = new Child();
instance.getFatherValue(); // true instance.getChildValue(); // false

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function Father () {
  this.fatherValue = true;
}
Father.prototype.getFatherValue = function () {
  console.log(this.fatherValue);
};
function Child () {
  this.childValue = false;
}
// 实现继承:继承自Father
Child.prototype = new Father();
Child.prototype.getChildValue = function () {
  console.log(this.childValue);
};
var instance = new Child();
instance.getFatherValue(); // true
instance.getChildValue();  // false

在地方的代码中,原型链继承的大旨语句是Child.prototype = new Father(),它完结了ChildFather的继承,
而两次三番是透过创造Father的实例,并将该实例赋给Child.prototype实现的。

达成的实质是重写原型对象,代之以一个新类型的实例。也就是说,原来存在于Father的实例中的所有属性和章程,
今日也存在于Child.prototype中了。

其一事例中的实例以及构造函数和原型之间的关系如下图所示:

亚洲必赢官网 3

在地点的代码中,大家从未行使Child默许提供的原型,而是给它换了一个新原型;那几个新原型就是Father的实例。
于是,新原型不仅具备了作为一个Father的实例所拥有的百分之百属性和方法。而且其里面还有一个指南针[[Prototype]],指向了Father的原型。

  • instance指向Child的原型对象
  • Child的原型对象指向Father的原型对象
  • getFatherValue()方法依旧还在Father.prototype
  • 但是,fatherValue则位于Child.prototype
  • instance.constructor当今针对的是Father

因为fatherValue是一个实例属性,而getFatherValue()则是一个原型方法。既然Child.prototype现在是Father的实例,
那么fatherValue理所当然就放在该实例中。

经过达成原型链,本质上增加了本章前面介绍的原型搜索机制。例如,instance.getFatherValue()会经历多少个搜索步骤:

  1. 寻找实例
  2. 搜索Child.prototype
  3. 搜索Father.prototype

原型链继承

动用原型链作为完成屡次三番的主导思想是:利用原型让一个引用类型继承另一个引用类型的习性和措施。首先我们先想起一些基本概念:

  • 每个构造函数都有一个原型对象(prototype
  • 原型对象涵盖一个针对性构造函数的指针(constructor
  • 实例都蕴含一个对准原型对象的中间指针([[Prototype]]

一旦咱们让原型对象等于另一个门类的达成,结果会什么?显著,那会儿的原型对象将涵盖一个针对性另一个原型的指针
相应的,另一个原型中也蕴藏着一个针对另一个构造函数的指针。如若另一个原型又是另一个项目标实例,那么上述提到仍旧创建,
如此罕见推进,就结成了实例与原型的链条。
更详实的始末可以参考其一链接。
先看一个大约的事例,它以身作则了接纳原型链达成三番五次的着力框架:

function Father () { this.fatherValue = true; }
Father.prototype.getFatherValue = function () {
console.log(this.fatherValue); }; function Child () { this.childValue =
false; } // 达成持续:继承自Father Child.prototype = new Father();
Child.prototype.getChildValue = function () {
console.log(this.childValue); }; var instance = new Child();
instance.getFatherValue(); // true instance.getChildValue(); // false

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function Father () {
  this.fatherValue = true;
}
 
Father.prototype.getFatherValue = function () {
  console.log(this.fatherValue);
};
 
function Child () {
  this.childValue = false;
}
 
// 实现继承:继承自Father
Child.prototype = new Father();
 
Child.prototype.getChildValue = function () {
  console.log(this.childValue);
};
 
var instance = new Child();
instance.getFatherValue(); // true
instance.getChildValue();  // false

在上头的代码中,原型链继承的主干语句是Child.prototype = new Father(),它达成了ChildFather的继承,
而后续是通过创建Father的实例,并将该实例赋给Child.prototype实现的。

落到实处的本来面目是重写原型对象,代之以一个新类型的实例。也就是说,原来存在于Father的实例中的所有属性和艺术,
今日也设有于Child.prototype中了。

本条例子中的实例以及构造函数和原型之间的涉及如下图所示:

亚洲必赢官网 4

在上头的代码中,大家从未接纳Child默许提供的原型,而是给它换了一个新原型;这一个新原型就是Father的实例。
于是,新原型不仅有着了作为一个Father的实例所独具的整套性能和办法。而且其内部还有一个指针[[Prototype]],指向了Father的原型。

  • instance指向Child的原型对象
  • Child的原型对象指向Father的原型对象
  • getFatherValue()办法依旧还在Father.prototype
  • 但是,fatherValue则位于Child.prototype
  • instance.constructor现在本着的是Father

因为fatherValue是一个实例属性,而getFatherValue()则是一个原型方法。既然Child.prototype现在是Father的实例,
那么fatherValue当然就位于该实例中。

透过兑现原型链,本质上伸张了本章后边介绍的原型搜索机制。例如,instance.getFatherValue()会经历五个搜索步骤:

  1. 招来实例
  2. 搜索Child.prototype
  3. 搜索Father.prototype

var person1=createPerson(“kobe”,”34″,”player”);

别忘了Object

具备的函数都默许原型都是Object的实例,因而默许原型都会蕴藏一个里边指针[[Prototype]],指向Object.prototype
那也多亏拥有自定义类型都会一而再toString()valueOf()等默许方法的根本原因。所以,
俺们说地点例子显示的原型链中还应有包涵其余一个继续层次。关于Object的更加多内容,能够参见那篇博客。

也就是说,Child继承了Father,而Father继承了Object。当调用了instance.toString()时,
事实上调用的是保存在Object.prototype中的那一个格局。

别忘了Object

所有的函数都默许原型都是Object的实例,因而默许原型都会蕴藏一个中间指针[[Prototype]],指向Object.prototype
那也多亏拥有自定义类型都会继续toString()valueOf()等默许方法的根本原因。所以,
大家说上边例子呈现的原型链中还应当包罗其余一个持续层次。关于Object的越来越多内容,可以参照这篇博客。

也就是说,Child亚洲必赢官网 ,继承了Father,而Father继承了Object。当调用了instance.toString()时,
实质上调用的是保存在Object.prototype中的那一个方式。

var person2=createPerosn(“patty”,”32″,”singer”);

原型链继承的题目

第一是各类,一定要先一连父类,然后为子类添加新点子。

其次,动用原型链达成两次三番时,无法运用对象字面量创造原型方法。因为那样做就会重写原型链,如上边的例子所示:

JavaScript

function Father () { this.fatherValue = true; }
Father.prototype.getFatherValue = function () {
console.log(this.fatherValue); }; function Child () { this.childValue =
false; } // 继承了Father // 此时的原型链为 Child -> Father ->
Object Child.prototype = new Father(); //
使用字面量添加新章程,会招致上一行代码无效 //
此时我们考虑的原型链被隔离,而是变成 Child -> Object //
所以大家不引进这么写了 Child.prototype = { getChildValue: function () {
console.log(this.childValue); } }; var instance = new Child();
instance.getChildValue(); // false instance.getFatherValue(); // error!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function Father () {
  this.fatherValue = true;
}
Father.prototype.getFatherValue = function () {
  console.log(this.fatherValue);
};
function Child () {
  this.childValue = false;
}
// 继承了Father
// 此时的原型链为 Child -> Father -> Object
Child.prototype = new Father();
// 使用字面量添加新方法,会导致上一行代码无效
// 此时我们设想的原型链被切断,而是变成 Child -> Object
// 所以我们不推荐这么写了
Child.prototype = {
  getChildValue: function () {
    console.log(this.childValue);
  }
};
var instance = new Child();
instance.getChildValue();  // false
instance.getFatherValue(); // error!

在地点的代码中,我们连年五遍修改了Child.prototype的值。由于现行的原型包涵的是一个Object的实例,
而非Father的实例,由此大家考虑中的原型链已经被割裂——ChildFather以内业已没有涉及了。

最终,在成立子类型的实例时,无法向超类型的构造函数中传递参数。实际上,应该就是没有艺术在不影响所有目的实例的景况下,
给超类型的构造函数传递参数。由此,大家很少单独选择原型链。

原型链继承的题目

先是是各类,一定要先一连父类,然后为子类添加新格局。

其次,动用原型链完毕一而再时,无法运用对象字面量成立原型方法。因为那样做就会重写原型链,如上面的例证所示:

function Father () { this.fatherValue = true; }
Father.prototype.getFatherValue = function () {
console.log(this.fatherValue); }; function Child () { this.childValue =
false; } // 继承了Father // 此时的原型链为 Child -> Father ->
Object Child.prototype = new Father(); //
使用字面量添加新办法,会招致上一行代码无效 //
此时大家着想的原型链被隔离,而是变成 Child -> Object Child.prototype
= { getChildValue: function () { console.log(this.childValue); } }; var
instance = new Child(); instance.getChildValue(); // false
instance.getFatherValue(); // error!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function Father () {
  this.fatherValue = true;
}
 
Father.prototype.getFatherValue = function () {
  console.log(this.fatherValue);
};
 
function Child () {
  this.childValue = false;
}
 
// 继承了Father
// 此时的原型链为 Child -> Father -> Object
Child.prototype = new Father();
 
// 使用字面量添加新方法,会导致上一行代码无效
// 此时我们设想的原型链被切断,而是变成 Child -> Object
Child.prototype = {
  getChildValue: function () {
    console.log(this.childValue);
  }
};
 
var instance = new Child();
instance.getChildValue();  // false
instance.getFatherValue(); // error!

在上头的代码中,大家总是五遍修改了Child.prototype的值。由于前日的原型包涵的是一个Object的实例,
而非Father的实例,由此我们着想中的原型链已经被隔离——ChildFather中间已经没有关联了。

最终,在开立子类型的实例时,不可以向超类型的构造函数中传递参数。实际上,应该算得没有主意在不影响所有目标实例的事态下,
给超类型的构造函数传递参数。由此,大家很少单独行使原型链。

 构造函数方式

借用构造函数继承

借用构造函数(constructor
stealing)的中坚思想如下:即在子类构造函数的其中调用超类型构造函数。

JavaScript

function Father (name) { this.name = name; this.colors = [‘red’,
‘blue’, ‘green’]; } function Child (name) { //
继承了Father,同时传递了参数 //
之所以这么做,是为了取得Father构造函数中的所有属性和情势 //
之所以用call,是为着改进Father内部this的针对 Father.call(this, name); }
var instance1 = new Child(“weiwei”); instance1.colors.push(‘black’);
console.log(instance1.colors); // [ ‘red’, ‘blue’, ‘green’, ‘black’ ]
console.log(instance1.name); // weiwei var instance2 = new
Child(“lily”); console.log(instance2.colors); // [ ‘red’, ‘blue’,
‘green’ ] console.log(instance2.name); // lily

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function Father (name) {
  this.name = name;
  this.colors = [‘red’, ‘blue’, ‘green’];
}
function Child (name) {
  // 继承了Father,同时传递了参数
  // 之所以这么做,是为了获得Father构造函数中的所有属性和方法
  // 之所以用call,是为了修正Father内部this的指向
  Father.call(this, name);
}
var instance1 = new Child("weiwei");
instance1.colors.push(‘black’);
console.log(instance1.colors); // [ ‘red’, ‘blue’, ‘green’, ‘black’ ]
console.log(instance1.name); // weiwei
var instance2 = new Child("lily");
console.log(instance2.colors); // [ ‘red’, ‘blue’, ‘green’ ]
console.log(instance2.name); // lily

为了确保Father构造函数不会重写子类型的属性,可以在调用超类型构造函数后,再添加应该在子类型中定义的性质。

借用构造函数继承

借用构造函数(constructor
stealing)的为主思维如下:即在子类构造函数的内部调用超类型构造函数。

function Father (name) { this.name = name; this.colors = [‘red’,
‘blue’, ‘green’]; } function Child (name) { //
继承了Father,同时传递了参数 Father.call(this, name); } var instance1 =
new Child(“weiwei”); instance1.colors.push(‘black’);
console.log(instance1.colors); // [ ‘red’, ‘blue’, ‘green’, ‘black’ ]
console.log(instance1.name); // weiwei var instance2 = new
Child(“lily”); console.log(instance2.colors); // [ ‘red’, ‘blue’,
‘green’ ] console.log(instance2.name); // lily

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function Father (name) {
  this.name = name;
  this.colors = [‘red’, ‘blue’, ‘green’];
}
 
function Child (name) {
  // 继承了Father,同时传递了参数
  Father.call(this, name);
}
 
var instance1 = new Child("weiwei");
instance1.colors.push(‘black’);
console.log(instance1.colors); // [ ‘red’, ‘blue’, ‘green’, ‘black’ ]
console.log(instance1.name); // weiwei
 
var instance2 = new Child("lily");
console.log(instance2.colors); // [ ‘red’, ‘blue’, ‘green’ ]
console.log(instance2.name); // lily

为了保证Father构造函数不会重写子类型的特性,能够在调用超类型构造函数后,再添加应该在子类型中定义的属性。

与工厂方式不一样的是,没有突显的创制对象,直接将性能和措施赋值this对象,没有return语句。

借用构造函数的后天不足

同构造函数一样,不能够落到实处格局的复用(所有的办法会被另行创建一份)。

借用构造函数的短处

同构造函数一样,不可能兑现格局的复用。

function Person(name,age,job){

结缘使用原型链和借用构造函数

常常,大家会结合使用原型链继承和借用构造函数来促成持续。也就是说,使用原型链完毕对原型属性和章程的存续,
而透过借用构造函数来促成对实例属性的继承。那样,既通过在原型上定义方法完结了函数复用,又可以保险每个实例都有它自己的特性。
大家改造最初的事例如下:

JavaScript

// 父类构造函数 function Person (name, age, job) { this.name = name;
this.age = age; this.job = job; } // 父类方法 Person.prototype.sayName =
function () { console.log(this.name); }; // ————– //
子类构造函数 function Student (name, age, job, school) { //
继承父类的所有实例属性(得到父类构造函数中的属性) Person.call(this,
name, age, job); this.school = school; // 添加新的子类属性 } //
继承父类的原型方法(得到父类原型链上的属性和方法) Student.prototype =
new Person(); // 新增的子类方法 Student.prototype.saySchool = function
() { console.log(this.school); }; var person1 = new Person(‘Weiwei’, 27,
‘Student’); var student1 = new Student(‘莉莉(Lily)’, 25, ‘Doctor’, “Southeast
University”); console.log(person1.sayName === student1.sayName); // true
person1.sayName(); // Weiwei student1.sayName(); // Lilystudent1.saySchool(); // Southeast University

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 父类构造函数
function Person (name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
}
// 父类方法
Person.prototype.sayName = function () {
  console.log(this.name);
};
// ————–
// 子类构造函数
function Student (name, age, job, school) {
  // 继承父类的所有实例属性(获得父类构造函数中的属性)
  Person.call(this, name, age, job);
  this.school = school; // 添加新的子类属性
}
// 继承父类的原型方法(获得父类原型链上的属性和方法)
Student.prototype = new Person();
// 新增的子类方法
Student.prototype.saySchool = function () {
  console.log(this.school);
};
var person1 = new Person(‘Weiwei’, 27, ‘Student’);
var student1 = new Student(‘Lily’, 25, ‘Doctor’, "Southeast University");
console.log(person1.sayName === student1.sayName); // true
person1.sayName();  // Weiwei
student1.sayName(); // Lily
student1.saySchool(); // Southeast University

重组集成幸免了原型链和借用构造函数的缺点,融合了它们的优点,成为了JavaScript中最常用的继承形式。
而且,instanceofisPropertyOf()也可以用于识别基于组合继承创设的靶子。

结合使用原型链和借用构造函数

常见,大家会构成使用原型链继承和借用构造函数来兑现持续。也就是说,使用原型链已毕对原型属性和方法的后续,
而透过借用构造函数来兑现对实例属性的两次三番。那样,既通过在原型上定义方法达成了函数复用,又可以确保每个实例都有它自己的性能。
大家改造最初的例子如下:

// 父类构造函数 function Person (name, age, job) { this.name = name;
this.age = age; this.job = job; } // 父类方法 Person.prototype.sayName =
function () { console.log(this.name); }; // ————– //
子类构造函数 function Student (name, age, job, school) { //
继承父类的拥有实例属性 Person.call(this, name, age, job); this.school =
school; // 添加新的子类属性 } // 继承父类的原型方法 Student.prototype =
new Person(); // 新增的子类方法 Student.prototype.saySchool = function
() { console.log(this.school); }; var person1 = new Person(‘Weiwei’, 27,
‘Student’); var student1 = new Student(‘Lily’, 25, ‘Doctor’, “Southeast
University”); console.log(person1.sayName === student1.sayName); // true
person1.sayName(); // Weiwei student1.sayName(); // Lilystudent1.saySchool(); // Southeast University

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// 父类构造函数
function Person (name, age, job) {
  this.name = name;
  this.age = age;
  this.job = job;
}
 
// 父类方法
Person.prototype.sayName = function () {
  console.log(this.name);
};
 
// ————–
 
// 子类构造函数
function Student (name, age, job, school) {
  // 继承父类的所有实例属性
  Person.call(this, name, age, job);
  this.school = school; // 添加新的子类属性
}
 
// 继承父类的原型方法
Student.prototype = new Person();
 
// 新增的子类方法
Student.prototype.saySchool = function () {
  console.log(this.school);
};
 
var person1 = new Person(‘Weiwei’, 27, ‘Student’);
var student1 = new Student(‘Lily’, 25, ‘Doctor’, "Southeast University");
 
console.log(person1.sayName === student1.sayName); // true
 
person1.sayName();  // Weiwei
student1.sayName(); // Lily
student1.saySchool(); // Southeast University

重组集成避免了原型链和借用构造函数的败笔,融合了它们的亮点,成为了JavaScript中最常用的继承情势。
而且,instanceofisPropertyOf()也可以用于识别基于组合继承创立的目的。

    this.name=name;

重组继承的创新版:使用Object.create()

在地点,大家继承父类的原型方法应用的是Student.prototype = new Person()
这样做有过多的问题。
校勘措施是选拔ES5中新增的Object.create()。可以调用这几个措施来成立一个新目的。新指标的原型就是调用create()措施传入的率先个参数:

JavaScript

Student.prototype = Object.create(Person.prototype);
console.log(Student.prototype.constructor); // [Function: Person] //
设置 constructor 属性指向 Student Student.prototype.constructor =
Student;

1
2
3
4
Student.prototype = Object.create(Person.prototype);
console.log(Student.prototype.constructor); // [Function: Person]
// 设置 constructor 属性指向 Student
Student.prototype.constructor = Student;

详尽用法可以参考文档。
关于Object.create()的落到实处,我们得以参考一个不难的polyfill:

JavaScript

function createObject(proto) { function F() { } F.prototype = proto;
return new F(); } // Usage: Student.prototype =
createObject(Person.prototype);

1
2
3
4
5
6
7
function createObject(proto) {
    function F() { }
    F.prototype = proto;
    return new F();
}
// Usage:
Student.prototype = createObject(Person.prototype);

从精神上讲,createObject()对传播其中的目的执行了三回浅复制。

整合继承的改进版:使用Object.create()

在地方,我们继续父类的原型方法运用的是Student.prototype = new Person()
这样做有不少的问题。
革新方式是行使ES5中新增的Object.create()。能够调用那么些方法来创制一个新对象。新目的的原型就是调用create()办法传入的率先个参数:

Student.prototype = Object.create(Person.prototype);
console.log(Student.prototype.constructor); // [Function: Person] //
设置 constructor 属性指向 Student Student.prototype.constructor =
Student;

1
2
3
4
5
6
Student.prototype = Object.create(Person.prototype);
 
console.log(Student.prototype.constructor); // [Function: Person]
 
// 设置 constructor 属性指向 Student
Student.prototype.constructor = Student;

详见用法能够参照文档。
关于Object.create()的贯彻,我们可以参见一个大致的polyfill:

function createObject(proto) { function F() { } F.prototype = proto;
return new F(); } // Usage: Student.prototype =
createObject(Person.prototype);

1
2
3
4
5
6
7
8
function createObject(proto) {
    function F() { }
    F.prototype = proto;
    return new F();
}
 
// Usage:
Student.prototype = createObject(Person.prototype);

从本质上讲,createObject()对传播其中的目的执行了五次浅复制。

    this.age=age;

ES6中的面向对象语法

ES6中引入了一套新的显要字用来兑现class。
但它并不是映入了一种新的面向对象继承情势。JavaScript照旧是依照原型的,这个新的重大字概括class、
constructor、
static、
extends、
和super。

class关键字但是是提供了一种在本文中所研讨的依照原型格局和构造器方式的面向对象的继承形式的语法糖(syntactic
sugar)

对后面的代码修改如下:

JavaScript

‘use strict’; class Person { constructor (name, age, job) { this.name =
name; this.age = age; this.job = job; } sayName () {
console.log(this.name); } } class Student extends Person { constructor
(name, age, school) { super(name, age, ‘Student’); this.school = school;
} saySchool () { console.log(this.school); } } var stu1 = new
Student(‘weiwei’, 20, ‘Southeast University’); var stu2 = new
Student(‘lily’, 22, ‘Nanjing University’); stu1.sayName(); // weiwei
stu1.saySchool(); // Southeast University stu2.sayName(); // lily
stu2.saySchool(); // Nanjing University

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
‘use strict’;
class Person {
  constructor (name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
  }
  sayName () {
    console.log(this.name);
  }
}
class Student extends Person {
  constructor (name, age, school) {
    super(name, age, ‘Student’);
    this.school = school;
  }
  saySchool () {
    console.log(this.school);
  }
}
var stu1 = new Student(‘weiwei’, 20, ‘Southeast University’);
var stu2 = new Student(‘lily’, 22, ‘Nanjing University’);
stu1.sayName(); // weiwei
stu1.saySchool(); // Southeast University
stu2.sayName(); // lily
stu2.saySchool(); // Nanjing University

ES6中的面向对象语法

ES6中引入了一套新的显要字用来落到实处class。
JavaScript仍旧是基于原型的,这个新的要害字概括class、
constructor、
static、
extends、
和super。

对前方的代码修改如下:

‘use strict’; class Person { constructor (name, age, job) { this.name =
name; this.age = age; this.job = job; } sayName () {
console.log(this.name); } } class Student extends Person { constructor
(name, age, school) { super(name, age, ‘Student’); this.school = school;
} saySchool () { console.log(this.school); } } var stu1 = new
Student(‘weiwei’, 20, ‘Southeast University’); var stu2 = new
Student(‘lily’, 22, ‘Nanjing University’); stu1.sayName(); // weiwei
stu1.saySchool(); // Southeast University stu2.sayName(); // lily
stu2.saySchool(); // Nanjing University

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
‘use strict’;
 
class Person {
 
  constructor (name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
  }
 
  sayName () {
    console.log(this.name);
  }
 
}
 
class Student extends Person {
 
  constructor (name, age, school) {
    super(name, age, ‘Student’);
    this.school = school;
  }
 
  saySchool () {
    console.log(this.school);
  }
 
}
 
var stu1 = new Student(‘weiwei’, 20, ‘Southeast University’);
var stu2 = new Student(‘lily’, 22, ‘Nanjing University’);
 
stu1.sayName(); // weiwei
stu1.saySchool(); // Southeast University
 
stu2.sayName(); // lily
stu2.saySchool(); // Nanjing University

    this.job=job;

类:class

是JavaScript中现有基于原型的三番五次的语法糖。ES6中的并不是一种新的成立对象的方法,只不过是一种“特殊的函数”,
故此也包涵类表明式和类声明,
但必要专注的是,与函数申明分化的是,类申明不会被提升。
参照链接

类:class

是JavaScript中现有基于原型的接轨的语法糖。ES6中的并不是一种新的创造对象的主意,只但是是一种“特殊的函数”,
据此也蕴含类表达式和类声明,
但须要小心的是,与函数申明差其余是,类表明不会被提升。
参考链接

    this.sayName=function(){

类构造器:constructor

constructor()主意是有一种特殊的和class一路用于创立和开首化对象的艺术。注意,在ES6类中只好有一个称号为constructor的方法,
要不然会报错。在constructor()艺术中可以调用super重在字调用父类构造器。若是您未曾点名一个构造器方法,
类会自动使用一个默许的构造器。参照链接

类构造器:constructor

constructor()主意是有一种特有的和class同步用于成立和起头化对象的法门。注意,在ES6类中不得不有一个名称为constructor的方法,
要不然会报错。在constructor()形式中得以调用super主要字调用父类构造器。假设你从未点名一个构造器方法,
类会自动使用一个默许的构造器。参照链接

    console.log(this.name);

类的静态方法:static

静态方法就是可以直接行使类名调用的格局,而不必对类举行实例化,当然实例化后的类也无能为力调用静态方法。
静态方法常被用于创建应用的工具函数。参照链接

类的静态方法:static

静态方法就是可以直接接纳类名调用的情势,而不必对类举办实例化,当然实例化后的类也无能为力调用静态方法。
静态方法常被用于创建应用的工具函数。参照链接

   };

此起彼伏父类:extends

extends主要字可以用于后续父类。使用extends可以扩大一个放置的靶子(如Date),也足以是自定义对象,或者是null

此起彼伏父类:extends

extends重在字能够用来后续父类。使用extends可以扩张一个停放的靶子(如Date),也得以是自定义对象,或者是null

}

关键字:super

super要害字用于调用父对象上的函数。
super.propsuper[expr]表明式在类和对象字面量中的任何方式定义中都有效。

JavaScript

super([arguments]); // 调用父类构造器
super.functionOnParent([arguments]); // 调用父类中的方法

1
2
super([arguments]); // 调用父类构造器
super.functionOnParent([arguments]); // 调用父类中的方法

比方是在类的构造器中,必要在this重点字此前使用。参考链接

关键字:super

super驷不及舌字用于调用父对象上的函数。
super.propsuper[expr]表明式在类和对象字面量中的任何形式定义中都有效。

super([arguments]); // 调用父类构造器
super.functionOnParent([arguments]); // 调用父类中的方法

1
2
super([arguments]); // 调用父类构造器
super.functionOnParent([arguments]); // 调用父类中的方法

万一是在类的构造器中,须求在this重在字以前运用。参照链接

var person1=new Person();

小结

正文对JavaScript的面向对象机制进行了相比深切的解读,尤其是构造函数和原型链格局已毕目的的创办、继承、以及实例化。
除此以外,本文还简要介绍了如在ES6中编辑面向对象代码。

小结

本文对JavaScript的面向对象机制进行了较为浓厚的解读,更加是构造函数和原型链格局完毕目标的创制、继承、以及实例化。
除此以外,本文还简要介绍了如在ES6中编辑面向对象代码。

var person2=new Person();

References

  1. 详解Javascript中的Object对象
  2. new操作符
  3. JavaScript面向对象简介
  4. Object.create()
  5. 接二连三与原型链
  6. Understanding the prototype property in
    JavaScript

    1 赞 8 收藏
    评论

亚洲必赢官网 5

References

  1. 详解Javascript中的Object对象
  2. new操作符
  3. JavaScript面向对象简介
  4. Object.create()
  5. 此起彼伏与原型链

    2 赞 7 收藏 4
    评论

亚洲必赢官网 6

console.log(person1.sayName==person2.sayName)//false
阐明分裂实例的同名函数是不等于的

一旦大家想要的结果是三头对等,能够那样完成

function  Person(name,age,job){

   this.name=name;

   this.age=age;

   this.job=job;

   this.sayName=sayName;

}

function sayName(){

   console.log(this.name);

}

var person1=new Person();

var person2=new Person();

console.log(person1.sayName==person2.sayName);//true

创立Person的新实例,需求运用new操作符,那种措施下调用构造函数会经历七个级次,分别是:

开创一个新目的

将构造函数的效能域赋值给这几个新的目标

举办构造函数中的代码

回去新对象

person1和person2那八个目标都有一个constructor属性,该属性指向Person

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

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

原型方式

特色:新目的的这几个属性和艺术是独具实例共享的

function Person(){

}

Person.prototype.name=”kobe”;

Person.prototype.age=38;

Person.prototype.sayName=function(){

   console.log(this.name);

}

var person1=new Person();

var person2=new Person();

console.log(person1.sayName==person2.sayName);//true

偶尔大家想精晓该属性到底是存在对象中要么存在原型中,可以行使以下办法

咱俩使用in操作符和hasOwnProperty结合判断

“name” in object无论该属性到底存在原型中或者对象中,都会回到true

而hasOwnProperty唯有存在实例中才回去true

so:唯有in操作符重临true,而hasOwnProperty再次回到false,能确定属性是原型中的属性。

function hasPrototypeProperty(object,name){

   return !object.hasOwnProperty(name)&&(name in object);

}

原型对象存在问题,牵一发而动全身

function Person(){

}

Perosn.prototype=function(){

   constructor;Person,

   name:”kobe”,

   age:”29″,

   job:”player”,

   friends:[“shely”,”count”],

   sayName:function(){

       console.log(this.name); 

  }

};

var person1=new Person();

var person2=new Person();

person1.friends.push(“ann”);

console.log(person1.friends===person2.friends);//true

焚薮而田的点子:是拔取构造函数形式和原型格局

function Person(name,age,job){

   this.name=name;

   this.age=age;

   this.job=job;

   this.friends=[“she”,”ya”];

}

Person.prototype={

   constructor:Person,

   sayName:function(){

      console.log(this.name);  

}

};

var person1=new Person();

var person2=new Person();

person1.friends.push(“VAN”);

console.log(person1.friends===person2.friends);//false

动态原型情势

function Person(name,age,job){

   this.name=name;

   this.age=age;

   this.job=job;

   if(typeof this.sayName!=”function”){

   Person.prototype.sayName=function(){

      console.log(this.name);

   }

   };

}

寄生构造函数情势

function Person(name,age,job){

   var o=new Object();

   o.name=name;

   o.age=age;

   o.job=job;

   o.sayName=function(){

      console.log(this.name); 

   };

   return o;

}

var friend=new Person();//此格局与工厂方式更加接近

2.js兑现持续的二种办法

原型链继承:原型对象属性共享

function Parent2(){

   this.name=”kobe”;

   this.play=[1,2,3];

}

function Child2(){

   this.type=”children”;

}

Child2.prototype=new Parent2();

var say1=new Child2();

var say2=new Child2();

say1.play.push(“van”);

console.log(say1.play==say2.play);//true

借用构造函数完毕持续:不能兑现持续原型对象

function Parent1(){

   this.name=”kobe”;

}

Parent1.prototype.age=90;

function Child(){

   Parent1.call(this);

   this.type=”service”;

}

var say=new Child();

console.log();//error

组合式继承

function Parent4(name){

   this.name=”kobe”;

   this.play=[1,2,3];

}

Parent4.prototype.sayName=function(){

  

}

function Child4(name,age){

   Parent3.call(this,name);

   this.age=age;

}

Child4.prototype=new Parent4();

Child4.prototype.constructor=Child4;

Child4.prototype.sayAge=function(){

   console.log(this.age);

};

var ins1=new Child4();

var ins2=new Child4();

ins1.push.push(4);

console.log(ins1.play==ins2.play);//false

原型式继承

function object(){

   function F(){}

   F.prototype=o;

   return new F();

}

var person={

   name:”kobe”,

   friends;[“yang”,”du”,”geng”]

};

var onePerson=object(person);

var twoPerson=object(person);

寄生式继承

function object(o){

   function F(){}

   F.prototype=o;

   return new F();

}

 function create(o){

   var clone=object(o);

   clone.sayHi=function(){

     console.log(“hi”);

   };

   return clone;

}

var person={

   name:”kobe”,

   friends:[“james”,”waston”,”sun”]

};

var anotherPerson=creat(person);

anotherPerson.sayHi();//hi

寄生式组合继承

function inheritPrototype(Child5,Parent5){
    var prototype=Object(Parent5.prototype);
    prototype.constructor=Child5;
    Child5.prototype=prototype;
}
function Parent5(name){
    this.name=name;
    this.colors=[“red”,”blue”,”green”];
}
Parent5.prototype.sayName=function(){
    console.log(this.name);
};
function Child5(name,age){
    Parent5.call(this.name);
    this.age=age;
}
inheritPrototype(Child5,Parent5);
Child5.prototype.sayAge=function(){
     console.log(this.age);
};

 

网站地图xml地图