澳门新萄京官方网站-www.8455.com-澳门新萄京赌场网址

成立对象的方式与后续的三种方法,ES5与ES6类的

2019-07-14 作者:澳门新萄京赌场网址   |   浏览(131)

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

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

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

面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式,主要包括模块化、多态、和封装几种技术。对JavaScript而言,其核心是支持面向对象的,同时它也提供了强大灵活的基于原型的面向对象编程能力。

本文将会深入的探讨有关使用JavaScript进行面向对象编程的一些核心基础知识,包括对象的创建,继承机制,最后还会简要的介绍如何借助ES6提供的新的类机制重写传统的JavaScript面向对象代码。

其实要总结这几个概念已经很久了,只是之前一直都觉得自己还不算完全掌握,而且知识点还不够系统,所以一直拖着,但是最近又重新看了几篇文章,自己也测试了一下,觉得开始有些清晰了,所以想在这里给自己做个总结吧,也希望在学的你们能够在这里学到一点东西。不要急躁,慢慢看,一边看一边做测试,这也是我最近的感悟。看了不一定会,要真正自己动手去测试一下。

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

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

原文出处: 景庄   

面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式,主要包括模块化、多态、和封装几种技术。
对 JavaScript 而言,其核心是支持面向对象的,同时它也提供了强大灵活的基于原型的面向对象编程能力。
本文将会深入的探讨有关使用 JavaScript 进行面向对象编程的一些核心基础知识,包括对象的创建,继承机制,
最后还会简要的介绍如何借助 ES6 提供的新的类机制重写传统的JavaScript面向对象代码。

1.js创建对象的几种方式

面向对象的语言都有一个类的概念,通过类可以创建多个具有相同方法和属性的对象,ES6之前并没有类的概念,在ES6中引入类class.

面向对象的几个概念

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

  • 类:定义对象的特征。它是对象的属性和方法的模板定义。
  • 对象(或称实例):类的一个实例。
  • 属性:对象的特征,比如颜色、尺寸等。
  • 方法:对象的行为,比如行走、说话等。
  • 构造函数:对象初始化的瞬间被调用的方法。
  • 继承:子类可以继承父类的特征。例如,猫继承了动物的一般特性。
  • 封装:一种把数据和相关的方法绑定在一起使用的方法。
  • 抽象:结合复杂的继承、方法、属性的对象能够模拟现实的模型。
  • 多态:不同的类可以定义相同的方法或属性。

在JavaScript的面向对象编程中大体也包括这些。不过在称呼上可能稍有不同,例如,JavaScript中没有原生的“类”的概念,
而只有对象的概念。因此,随着你认识的深入,我们会混用对象、实例、构造函数等概念。

什么是对象?

我的理解就是这是一个存储灌,你可以在里面存储任何东西,这些东西就是我们之前学的各种js里面的数据类型,然后给每一个名字贴上一个名字,方便我们以后找到。

例子:

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

面向对象的几个概念

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

  • 类:定义对象的特征。它是对象的属性和方法的模板定义。
  • 对象(或称实例):类的一个实例。
  • 属性:对象的特征,比如颜色、尺寸等。
  • 方法:对象的行为,比如行走、说话等。
  • 构造函数:对象初始化的瞬间被调用的方法。
  • 继承:子类可以继承父类的特征。例如,猫继承了动物的一般特性。
  • 封装:一种把数据和相关的方法绑定在一起使用的方法。
  • 抽象:结合复杂的继承、方法、属性的对象能够模拟现实的模型。
  • 多态:不同的类可以定义相同的方法或属性。

在 JavaScript 的面向对象编程中大体也包括这些。不过在称呼上可能稍有不同,例如,JavaScript 中没有原生的“类”的概念,
而只有对象的概念。因此,随着你认识的深入,我们会混用对象、实例、构造函数等概念。

工厂模式

ES5 面向对象

对象(类)的创建

在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

如何定义一个对象?

  • 对象字面量
  • 构造函数创建
  • 原型模式创建

对象(类)的创建

在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

为什么会产生工厂模式,原因是使用同一个接口创建很多对象,会产生大量的重复代码,为了解决这个问题,产生了工厂模式。

创建对象(四种模式简介,此外还有动态原型模式、寄生构造函数模式、稳妥构造函数模式等)

一、工厂模式


function createPerson (Name,Age,Job) {

      var man= new Object();

      man.name= Name;

      man.age= Age;

      man.job= Job;

      man.sayName= function () {

              alert(this.name)

    }

  return  man;

}

var personOne=  createPerson ("Erric",26,"Engineer");

var personTwo=  createPerson ("Lori",26,"teacher");

优点:解决了多个相似对象的创建问题

缺点: ①  对象识别问题无法解决(即怎么知道一个对象的类型)

二、构造函数模式

function Person (Name,Age,Job) {

      this.name = Name;

      this.age = Age;

      this.job= Job;

      this.sayName= function () {

              alert(this.name)

      }

}

var personOne=  new Person("Erric",26,"Engineer");

var personTwo=  new Person("Lori",26,"teacher");

注一: 若不使用new操作符直接调用函数,那么其属性和方法都会被添加到window对象里面(因为在全局作用域调用一个方法时,this总是指向window对象)

如: Person("Erric",26,"Enginee")

        window.sayName()  //  弹出 "Erric"

          window.name            //  "Erric"

          window.age              //  26

注二: new 操作符实际上进行了以下操作

          ① 创建一个新的对象

          ② 将构造函数的作用域赋给新对象(this指向了这个新的对象)

          ③ 执行构造函数中的代码(为这个新对象添加属性)

          ④ 返回这个新的对象

优点:① 不用显式的创建对象

            ② 将属性和方法赋给了this对象

            ③ 没有return语句

缺点:①  每个方法都要在每个实例上重新创建一遍(personOne和personTwo中的sayName方法不是同一个方法,每个函数都是一个对象,故每  定义了一个函数就实例化了一个对象)。

            此问题也可以通过将方法单独抽出来解决(但是方法一多,都移到全局的话封装性就无从谈起),如下:

            function Person (Name,Age,Job) {

                    this.name = Name;

                      this.age = Age;

                      this.job= Job;

                      this.sayName= sayName

            }

            function sayName() {

                    alert(this.name)

              }

            var personOne=  new Person("Erric",26,"Engineer");

            var personTwo=  new Person("Lori",26,"teacher");

            ② 若是将公共的sayName方法移到全局,那么又没有封装性可言了。


三、原型模式

function Person () {

}

Person.prototype.name= "Erric"

Person.prototype.age= "28"

Person.prototype.job= "Job"

Person.prototype.sayName= function () {

        alert(this.sayName)

}

优点:①  解决了函数共用的问题,不用每个实例都创建一遍方法。

缺点:①  不能传参

            ② 如果实例中修改了原型中的属性(引用类型)或方法,那么这个属性或方法会被彻底的修改,而影响到其他实例。


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

function Person (Name,Age,Job) {

          this.name= Name

          this.age= Age

          this.job= Job

}

Person.prototype.sayName= function () {

          alert(this.name)

}

// 上面往原型上添加属性和方法的也可如下写,但是此时原型的constructor不指向Person构造函数,而是指向Object,因为Person.prototype就像一个新的对象实例,它的__proto__指向Object原型。

//  Person.prototype= {

          constructor: Person,            // 重新再实例中定义constructor的指向,覆盖Object原型中的constructor指向

          sayName: function () {

                  alert(this.name)

          }

}

var personOne=  new Person("Erric",26,"Engineer");

var personTwo=  new Person("Lori",26,"teacher");


原型对象的理解(重要)

1.首先得明白以下三点:

① 每个函数(含构造函数)都有一个prototype属性,指向Person原型

② 每个实例都有一个__proto__属性,也指向Person原型

③ 每个原型都有一个constructor属性,指向其对应的构造函数

构造函数、实例、原型三者关系如下图:

澳门新萄京官方网站 1

2.万物皆对象,说明原型链的最开始点都是Object,所以任何一个引用类型的 instanceof Object都会返回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");
}
}

自定义对象的类型检测

我们可以使用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

function createPerson(name,age,job){

类的继承(两种方式)

一、原型链继承

        对于什么是原型链?

        每个构造函数都有一个原型对象,原型对象的constructor指向这个构造函数本身,而实例的__proto__属性又指向原型对象。这个假设一个实例的__proto__内部指针指向其原型,而它的原型又是另一个类型的实例,那么它的原型又将指向另一个原型,另一个原型也包含一个指向它的构造函数的指针,假设另一个原型又是另一个类型的实例,这样层层递进,就构成了实例与原型的链条,这就是原型链的基本概念。

实现原型链的继承方式基本如下:

function Father () {

      this.appearance = "beautiful"

}

Father.prototype.sayHappy = function () {

        alert("快乐")

}

function Child () {

          this.name= "Jhon"

}

Child.prototype= new Father()        //  继承了父类的方法和属性

Child.prototype.addArr= [1,2,3,4,5]

var child= new Child()
child.sayHappy()          //  弹出“快乐”
child.appearance        //  "beautiful"

child.addArr                      //  [1,2,3,4,5]

原型链继承的缺点:①  不能传参  ② 若原型上的方法时引用类型的话,不小心被修改了的话会影响其他实例。


二、借助构造函数继承(利用calll和apply改变this指针)

基本思路:在子类型构造函数的内部调用超类型的构造函数。

function Father (Hobby){

      this.hobby= Hobby

}

Father.prototype.sayHappy = function () {

      alert("快乐")

}

function Child () {

      this.name= "Jhon"

      Father.call(this,"Play Games")          //  或者Father.apply(this,["Play Games"]),继承了Father的属性和方法

}

var child =  new Child()
child.sayHappy                // 没有反应,原型上的方法和属性不会继承
child.hobby                      //  "Play Games"

借助构造函数继承的缺点:①  方法都在构造函数中定义,函数的复用无从谈起    ②  超类中的方法对子类不可见。


三、组合继承(也叫经典继承,将原型链和借助构造函数继承相结合)

思路:1.原型链实现对原型属性和方法的继承;

            2.构造函数实现对实例属性的继承,且调用基类的构造函数;

function Father(Hobby) {

          this.hobby= Hobby;

          this.exGF = ['cuihua', 'erya']

}

Father.prototype.sayHappy = function () {

          alert("快乐")

}

function Child () {

          this.name= "Jhon"

          Father.call(this,"Play Games")          //  或者Father.apply(this,["Play Games"]),继承了Father的属性和方法

}

Child.prototype= new Father()

Student.prototype.sayName= function () {

          alert(this.name);

}

var liHua= new Child()

liHua.sayHappy()

liHua.sayName()


检测对象属性的两种方法:

object.hasOwnProperty(属性名),这个方法检测的是对象实例的属性(若是返回true),不能检测原型上的属性。

in操作符,检测对象所有的属性,包含原型和实例上的额,有的话就返回true.


判断一个原型是否在某个实例的原型链上:

Person.prototype.isPropotypeOf(personOne)    //  true

Object.prototype.isPropotypeOf(personOne)      //  true

判断一个构造函数是否在实例的原型链中出现过:

personOne instanceof Person                //  true

personOne instanceof Object                //  true


构造函数的问题

我们不建议在构造函数中直接定义方法,如果这样做的话,每个方法都要在每个实例上重新创建一遍,这将非常损耗性能。
——不要忘了,ECMAScript中的函数是对象,每定义一个函数,也就实例化了一个对象。

幸运的是,在ECMAScript中,我们可以借助原型对象来解决这个问题。

缺点:这种方法虽然简单明了,但是试想一下,如果我们要定义各种各样的水果对象,每一个水果都有color shape sweetnees的属性,我们都要一个个定义是不是会有点麻烦呢?

那看看下面这种构造函数的创建方法

构造函数的问题

我们不建议在构造函数中直接定义方法,如果这样做的话,每个方法都要在每个实例上重新创建一遍,这将非常损耗性能。
——不要忘了,ECMAScript中的函数是对象,每定义一个函数,也就实例化了一个对象。

幸运的是,在ECMAScript中,我们可以借助原型对象来解决这个问题。

    var o=new Object();

ES6 面向对象

ES6中引入了Class(类)这个概念,通过关键字class可以创建一个类。类的数据类型就是函数,类的所有方法都定义在prototype属性上。

class Person () {
        constructor (x,y) {
              this.name= x
              this.age= y
        }
        sayName () {
                alert("快乐")
        }
}
var liHua= new Person("张俊泽",26)

注: 可以理解为constuctor中的属性和方法为ES5中的构造函数部分,和constructor同级的是ES5中原型上的方法和属性。


ES6的继承通过extends关键字实现

class Father(){}
class Child extends Father {
        constructor(x,y,color){
                  super(x,y)
                  this.color= color
        }
        toString() {
                retunr "世界和平!"
        }
}

上面代码中,constructor方法和toString方法之中,都出现了super关键字,它在这里表示父类的构造函数,用来新建父类的this对象。

子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。


类的prototype和__proto__属性

Class作为构造函数的语法唐,同时有prototype和__proto__属性,因此存在两条继承链:

①  子类的__proto__,表示构造函数的继承,总是指向父类

②  子类的prototype属性的__proto__属性,表示方法的继承,总是指向父类的prototype属性。

class Father {

}

class Child extends Father{

          constructor () {

                  super()

          }

}

var childOne= new Child()

Child.__proto__ ==  Father        //  true

childOne.__proto__ ==  Child.prototype        //  true

Child.prototype.__proto__ ==  Fahter.prototype            //  true

借助原型模式定义对象的方法

我们创建的每个函数都有一个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'); 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;
}
 
// 通过原型模式来添加所有实例共享的方法
// 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);
        });
    }

}

借助原型模式定义对象的方法

我们创建的每个函数都有一个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(); // Lily

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实例的属性和行为。

构造函数中定义的属性和行为的优先级要比原型中定义的属性和行为的优先级高,如果构造函数和原型中定义了同名的属性或行为,
构造函数中的属性或行为会覆盖原型中的同名的属性或行为。

    o.name=name;

原型对象

现在我们来深入的理解一下什么是原型对象。

只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个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方法是不是都是一样的呢?那我们是不是可以用原型来写?

原型对象

现在我们来深入的理解一下什么是原型对象。

只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性,这个属性指向函数的原型对象。
在默认情况下,所有原型对象都会自动获得一个constructor属性,这个属性包含一个指向prototype属性所在函数的指针。
也就是说:Person.prototype.constructor指向Person构造函数。

创建了自定义的构造函数之后,其原型对象默认只会取得constructor属性;至于其他方法,则都是从Object继承而来的。
当调用构造函数创建一个新实例后,该实例内部将包含一个指针(内部属性),指向构造函数的原型对象。ES5中称这个指针为[[Prototype]]
在Firefox、Safari和Chrome在每个对象上都支持一个属性__proto__(目前已被废弃);而在其他实现中,这个属性对脚本则是完全不可见的。
要注意,这个链接存在于实例与构造函数的原型对象之间,而不是实例与构造函数之间

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

澳门新萄京官方网站 3

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

  • Person.prototype指向了原型对象
  • Person.prototype.constructor又指回了Person构造函数
  • Person的每个实例person1person2都包含一个内部属性(通常为__proto__),person1.__proto__person2.__proto__指向了原型对象

    o.age=age;

查找对象属性

从上图我们发现,虽然Person的两个实例都不包含属性和方法,但我们却可以调用person1.sayName()
这是通过查找对象属性的过程来实现的。

  1. 搜索首先从对象实例本身开始(实例person1sayName属性吗?——没有)
  2. 如果没找到,则继续搜索指针指向的原型对象person1.__proto__sayName属性吗?——有)

这也是多个对象实例共享原型所保存的属性和方法的基本原理。

注意,如果我们在对象的实例中重写了某个原型中已存在的属性,则该实例属性会屏蔽原型中的那个属性。
此时,可以使用delete操作符删除实例上的属性。

什么是原型?prototype

js中每一个函数都会有自己的一个原型对象,这个原型对象叫做prototype.而所有通过这个构造函数实例化的对象都会指向这个原型。其实你可以设想一下,构造函数是工厂的话,原型其实是不是可以是仓库,所有实例化的对象就可以从仓库里面拿东西。所以我们可以把所有对象公用的属性和方法给放在prototype下面,这样就可以避免属性和方法的重复定义。下面用一个例子和图来说明一下。

//这里我们使用原型来创建对象,所有对象共用的属性和方法就放在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

查找对象属性

从上图我们发现,虽然Person的两个实例都不包含属性和方法,但我们却可以调用person1.sayName()
这是通过查找对象属性的过程来实现的。

  1. 搜索首先从对象实例本身开始(实例person1sayName属性吗?——没有)
  2. 如果没找到,则继续搜索指针指向的原型对象person1.__proto__sayName属性吗?——有)

这也是多个对象实例共享原型所保存的属性和方法的基本原理。

注意,如果我们在对象的实例中重写了某个原型中已存在的属性,则该实例属性会屏蔽原型中的那个属性。
此时,可以使用delete操作符删除实例上的属性。

    o.job=job;

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上。

Object.getPrototypeOf()

根据ECMAScript标准,someObject.[[Prototype]] 符号是用于指派 someObject 的原型。
这个等同于 JavaScript 的 __proto__ 属性(现已弃用,因为它不是标准)。
从ECMAScript 5开始, [[Prototype]]成立对象的方式与后续的三种方法,ES5与ES6类的接续分析。 可以用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)返回的对象实际就是这个对象的原型。
这个方法的兼容性请参考该链接)。

    o.sayName=function(){

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属性给重新指向构造函数。(可以重新看一下上面我给出的那个图)

Object.keys()

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

JavaScript

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

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

此外,如果你想要得到所有实例属性,无论它是否可枚举,都可以使用Object.getOwnPropertyName()方法。

    console.log(this.name);

更简单的原型语法

在上面的代码中,如果我们要添加原型属性和方法,就要重复的敲一遍Person.prototype。为了减少这个重复的过程,
更常见的做法是用一个包含所有属性和方法的对象字面量来重写整个原型对象。
参考资料。

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​

更简单的原型语法

在上面的代码中,如果我们要添加原型属性和方法,就要重复的敲一遍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
});

   }

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

创建自定义类型的最常见方式,就是组合使用构造函数模式与原型模式。构造函数模式用于定义实例属性,
而原型模式用于定义方法和共享的属性。结果,每个实例都会有自己的一份实例属性的副本,但同时又共享着对方的引用,
最大限度的节省了内存。

如何实现对象的继承:

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

原型继承:

  • 构造函数都有一个指向原型对象的指针
  • 原型对象都有一个指向构造函数的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|imageView2/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|imageView2/2/w/1240)

![instance2的输出.png](http://upload-images.jianshu.io/upload_images/5763769-b2e3d6d0c8f39176.png?imageMogr2/auto-orient/strip|imageView2/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|imageView2/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|imageView2/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);
};

// --------------

// 子类构造函数
成立对象的方式与后续的三种方法,ES5与ES6类的接续分析。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|imageView2/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只支持实现继承,而且其实现继承主要依靠原型链来实现。

继承

大多的面向对象语言都支持两种继承方式:接口继承和实现继承。ECMAScript只支持实现继承,而且其实现继承主要依靠原型链来实现。

前面我们知道,JavaScript中实例的属性和行为是由构造函数和原型两部分共同组成的。如果我们想让Child继承Father
那么我们就需要把Father构造函数和原型中属性和行为全部传给Child的构造函数和原型。

}

原型链继承

使用原型链作为实现继承的基本思想是:利用原型让一个引用类型继承另一个引用类型的属性和方法。首先我们先回顾一些基本概念:

  • 每个构造函数都有一个原型对象(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

原型链继承

使用原型链作为实现继承的基本思想是:利用原型让一个引用类型继承另一个引用类型的属性和方法。首先我们先回顾一些基本概念:

  • 每个构造函数都有一个原型对象(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中了。

这个例子中的实例以及构造函数和原型之间的关系如下图所示:

澳门新萄京官方网站 5

在上面的代码中,我们没有使用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");

原型链继承的问题

首先是顺序,一定要先继承父类,然后为子类添加新方法。

其次,使用原型链实现继承时,不能使用对象字面量创建原型方法。因为这样做就会重写原型链,如下面的例子所示:

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之间已经没有关系了。

最后,在创建子类型的实例时,不能向超类型的构造函数中传递参数。实际上,应该说是没有办法在不影响所有对象实例的情况下,
给超类型的构造函数传递参数。因此,我们很少单独使用原型链。

原型链继承的问题

首先是顺序,一定要先继承父类,然后为子类添加新方法。

其次,使用原型链实现继承时,不能使用对象字面量创建原型方法。因为这样做就会重写原型链,如下面的例子所示:

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之间已经没有关系了。

最后,在创建子类型的实例时,不能向超类型的构造函数中传递参数。实际上,应该说是没有办法在不影响所有对象实例的情况下,
给超类型的构造函数传递参数。因此,我们很少单独使用原型链。

 构造函数模式

借用构造函数继承

借用构造函数(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构造函数不会重写子类型的属性,可以在调用超类型构造函数后,再添加应该在子类型中定义的属性。

借用构造函数继承

借用构造函数(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构造函数不会重写子类型的属性,可以在调用超类型构造函数后,再添加应该在子类型中定义的属性。

与工厂模式不同的是,没有显示的创建对象,直接将属性和方法赋值this对象,没有return语句。

借用构造函数的缺点

同构造函数一样,无法实现方法的复用。

借用构造函数的缺点

同构造函数一样,无法实现方法的复用(所有的方法会被重复创建一份)。

function Person(name,age,job){

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

通常,我们会组合使用原型链继承和借用构造函数来实现继承。也就是说,使用原型链实现对原型属性和方法的继承,
而通过借用构造函数来实现对实例属性的继承。这样,既通过在原型上定义方法实现了函数复用,又能够保证每个实例都有它自己的属性。
我们改造最初的例子如下:

// 父类构造函数 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

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()也能够用于识别基于组合继承创建的对象。

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

通常,我们会组合使用原型链继承和借用构造函数来实现继承。也就是说,使用原型链实现对原型属性和方法的继承,
而通过借用构造函数来实现对实例属性的继承。这样,既通过在原型上定义方法实现了函数复用,又能够保证每个实例都有它自己的属性。
我们改造最初的例子如下:

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(); // Lily student1.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()也能够用于识别基于组合继承创建的对象。

    this.name=name;

组合继承的改进版:使用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()对传入其中的对象执行了一次浅复制。

组合继承的改进版:使用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()对传入其中的对象执行了一次浅复制。

    this.age=age;

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

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

    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]表达式在类和对象字面量中的任何方法定义中都有效。

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

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

如果是在类的构造器中,需要在this关键字之前使用。参考链接

关键字:super

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

JavaScript

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. 继承与原型链

    2 赞 7 收藏 4 评论

澳门新萄京官方网站 6

References

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

    1 赞 8 收藏 评论

澳门新萄京官方网站 7

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);
};

 

本文由澳门新萄京官方网站发布于澳门新萄京赌场网址,转载请注明出处:成立对象的方式与后续的三种方法,ES5与ES6类的

关键词: