第十七节JavaScript 构造函数与原型

一. JS对象复习

1. 对象的创建

1.1. 字面量方式(也叫直接量)

var obj = {}; 

1.2 new操作符创建对象

var obj = new Object()

2.对象属性和方法

2.1 对象的属性

对象有属性，所谓的属性就是这个对象的特点、特性

var student = {};
student.sex = '男孩'

2.2 对象的方法

对象只能有属性，只是如果这个属性的值是一个函数，那么这个函数我们就称为对象的“方法”(method)。

student.study = function(){
    console.log('我学会了语文')
}

二. 构造函数

构造函数就是用来创造新对象的, 它必须用关键字new来创造,如果将构造函数用作普通函数的话,往往不会正常工作的. 按照一惯的约定, 我们开发者把构造函数的首字母大写用作辨别. 一个构造函数创造的对象被称为该构造函数的实例

常见的内置构造函数:

Object()

Array()

RegExp()

Function()

Date() //创建日期对象

1. 构造函数的原理

JavaScript规定，一个函数可以用new关键字来调用。那么此时将按顺序发生四件事情：

1）隐秘的创建一个新的空对象

2）将这个函数里面的this绑定到刚才创建隐秘新对象上

3）执行函数体里面的语句

4）返回这个新的对象

例子:

function People(){
    this.name = "小明";
    this.age = 18;
    this.sex = "男"; 
}// 使用new关键字来调用函数,那么函数就叫做构造函数,将返回一个对象
var xiaoming = new People();

console.log(xiaoming);  // People {name: "小明", age: 18, sex: "男"}
console.log(xiaoming.age);  //18
console.log(typeof xiaoming); //object

构造函数是使用new关键字来调用,生成实例对象

厉害了，现在我们发现函数不仅仅能够执行，还能返回出来一个对象。也就是说，对象是函数“生”出来的，对象是函数“new”出来的。

所以我们称呼这个生出对象的函数，叫做构造函数，一般的，构造函数用大写字母开头。也叫作People“类”。

xiaoming是People类的实例对象。

People是xiaoming对象的构造函数，也叫类。

2. 构造函数类和实例

People这个函数将被new关键词来调用,所以称为构造函数

构造函数里面语句将会被执行返回一个对象,所以new多少次,里面语句就执行多少次,宏观看,返回的所有对象都有name的属性,age属性

类是具有相同属性和方法的集合

我们说,这些返回的对象都有相同的属性群,所以可以看做是一类东西,那么People这个构造函数,也就可以看成类的定义

例子:

function People(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
}

//new关键字造出来的xiaoming、xiaohong，我们称为People类的实例。可以理解为实体
var xiaoming = new People("小明",18,"男");
var xiaohong = new People("小红",17,"女");

console.log(xiaoming);
console.log(xiaohong);

但是JavaScript中，没有类的概念。是通过构造函数的4步走机制来创建类的对象，可以看为类。JS这个语言是“基于对象”(base Object)的语言，不能叫做“面向对象”(orinted object)的语言。

所以我们的构造函数，也可以看成类的定义：

构造函数其实就是一个普通的函数，JS没有规定函数里写什么,。只不过我们知道new操作符的原理后,就习惯了先用this.'...' = 来罗列所有属性，和方法而已。你一定要深刻理解：

new调用一个函数的时候，函数里面的语句会执行。

function People(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.sayHello = function(){
        alert("你好我是" + this.name + ",nice to meet you");
    }
}

function Dog(name,pinzhong,age,sex){
    this.name = name;
    this.pinzhong = pinzhong;
    this.age = age;
    this.sex = sex;
    this.wangwang = function(){
        alert("汪汪汪汪" + this.name + "汪汪汪汪汪汪");
    }
}

var xiaoming = new People("小明",11,"男");
xiaoming.sayHello();

var xiaobai = new Dog("小白","京巴",2,"公的");
xiaobai.wangwang();

3. 构造函数里面的注意事项

3.1 如果构造函数里没有this,那么将创建一个空对象

//构造函数里面如果没有了this，那么就废了，就不能给隐秘新创建出来的对象添加属性。但是里面的语句能够执行！！所以new出来的就是一个空对象
function People(){
    for(var i = 1 , sum = 0; i <= 100 ; i++){
        sum += i;
    }
    alert(sum);
}

var xiaoming = new People();
console.log(xiaoming);

3.2 构造函数构造函数中，不允许出现return语句

构造函数总不能出现return, 严格的说是不能return 引用类型数据.如果出现return语句返回引用类型值，那么构造函数将不能返回新创建的那个对象,而是返回return 语句后面的内容

function People(name,age){
    this.name = name;
    this.age = age;
    return {"a":1,"b":2};
}

var xiaoming = new People("小明",12);
console.log(xiaoming);

    function aa() {
      this.name = "mingzi";
      function bb() {
        console.log("我是BB");
      }
      console.log("试试构造函数");
      return bb;   //返回了 bb函数  覆盖了原有this对象，数组也不行，也是对象的一种
    }
    var xm = new aa();
    console.log(xm);

3.3 JS没有规定构造函数中的语句的规范，想怎么写就怎么写：

// 这就是函数 你想怎么写就怎么写
function People(name,age){
  this.name = name;
  this.age = age;
  // if(this.age >= 18){
  //  this.state = "成年人";
  // }else{
  //  this.state = "未成年";
  // }

  this.state = this.age >= 18 ? "成年人" : "未成年";
}

var xiaoming = new People("小明",11);
alert(xiaoming.state);

总结一下

当一个函数用()调用的时候，this就是window

当一个函数用对象调用的时候，this就是这个对象

当一个函数绑定给一个HTML元素事件的时候，this就是这个HTML元素

当一个函数用定时器调用的时候，this就是window

当一个函数用apply、call调用的时候，this就是你指定的第一个参数

当一个函数用new调用的时候，this就是隐秘创建的空对象，函数里面的语句将被执行，并且返回新对象

四. 原型 prototype

1 原型 prototype

prototype就是英语“原型”的意思。原型是构造函数创建对象的原始模型

原型的特点:

原型也是对象，原型是函数对象的一个属性
原型自带constructor属性， constructor指定构造函数
构造函数创建出的对象会继承原型的属性和方法

// 任何函数都有原型,只是原型对于普通函数没什么大用,但对于构造函数用处极大
function fun(){
 console.log("您好")
}

console.log(fun.prototype);
console.log(typeof fun.prototype);

在JavaScript中，任何一个函数，都有一个prototype属性，指向一个对象。打印prototype属性,你会发现这个属性指向一个空对象。打印prototype的类型，发现是object类型。

2. 原型对象与实例

一个函数的原型，对于普通函数来说，没任何用。但是如果函数是一个构造函数，那么函数的原型，用处极大！

示例:

function People(name,sex,age){
    this.name = name;
    this.sex = sex;
    this.age = age;
}
People.prototype = {
    hight: 180
}

var xiaoming = new People("小明","男",18);

console.log(xiaoming.name);  // "小明"
console.log(xiaoming.sex);   // "男"
console.log(xiaoming.age);   // 18
console.log(xiaoming.hight); // 180

所以我们甚至可以把所有的属性都加在原型上

// 构造函数
function People(){
}

//构造函数的原型，我们更改了构造函数的原型，为一个新的对象：
People.prototype = {
    name : "小明",
    sex : "男",
    age : 18,
    hight: 180
}
var xiaoming = new People();

console.log(xiaoming.name);  // "小明"
console.log(xiaoming.sex);   // "男"
console.log(xiaoming.age);   // 18
console.log(xiaoming.hight); // 180

当一个对象被new出来的时候,不仅仅执行了构造函数里面的语句,我们的感觉,构造函数的原型中,所有的属性也加给了这个对象

3. 实例对象的proto 属性

当一个对象被new出来的时候，不仅仅执行了构造函数里面的语句，也会把proto指向构造函数的prototype。

// 构造函数
// 构造函数里面没有任何语句，也就是说，这个构造函数在执行的时候，不会给创建出来的对象添加任何属性。
function People(){
}

//构造函数的原型，我们更改了构造函数的原型，为一个新的对象：
People.prototype = {
    name : "小明",
    sex : "男",
    age : 18,
    hight: 180
}

//当一个对象被new出来的时候，不仅仅执行了构造函数里面的语句，也会把__proto__指向构造函数的prototype。
var xiaoming = new People();


//当我们试图访问sex、age属性的时候，身上没有。那么就去查找原型，原型身上有，就当做了自己的属性返回了。
console.log(xiaoming.name); 
console.log(xiaoming.sex); //自己没有，找原型对象
console.log(xiaoming.age); //自己没有，找原型对象

console.log(xiaoming.__proto__); 
// {name: "小明", sex: "男", age: 18, hight: 180}

console.log(xiaoming.__proto__ == People.prototype);
// true

注意:

任何一个对象，都有proto属性，这个属性是Chrome自己的属性，别的浏览器不兼容，但是别的浏览器也有原型对象，只不过不能通过proto进行访问而已。

这是属性指向自己的原型对象。

构造函数、原型、实例对象之间的关系

<style>
  #box {
    font: size 32px;
    color: red;
  }
</style>
</head>
<body>
  <h1></h1>
  <div id="box">wo shi box
  </div>
  <script>
    //1、原型与构造函数之间的关系
    function people(name, age) {
      this.name = name;
      this.age = age;
    }
    console.dir(people)
    console.dir(people.prototype.constructor === people);  //通过函数的属性prototype找到原型，再通过原型.constructor找到函数自己 
    console.dir(people.prototype.constructor);
    console.dir(people);
    console.log(people.prototype.constructor);
    // prototype对象是people构造函数的原型
    // people函数prototype原型对象的构造函数

    //2、构造函数与实例对象的关系
    var xm = new people('小明', 18)
    console.log('xm', xm);
    // xm是函数people的实例对象
    //people函数时xm对象的构造函数

    //3、实例对象与原型对象的关系
    console.dir(xm.__proto__ === people.prototype);//实例对象的__proto__属性等于原型
  </script>

4. 原型的扩展

我们的JavaScript有一个棒的机制：原型链查找。

当我们试图访问一个对象身上的属性的时候，如果这个对象身上有这个属性，则返回它的值。如果它身上没有这个属性，那么将访问它的原型对象，检测它的原型对象身上是否有这个值，如果有返回它原型对象身上的这个值。

任何一个函数都有原型，原型是一个对象，用prototype来访问。

当这个函数是构造函数的时候，new出来的对象，它们的原型对象就是这个构造函数的原型。

prototype我们称为“原型”，只有函数有原型

proto我们称为“原型对象”，任何对象都有原型对象。

5. 原型的应用

我们定义一个方法的时候，如果写在构造函数里面：

function People(name,age){
    this.name = name;
    this.age = age;
    this.sayHello = fucntion(){
        alert("你好,我是" + this.name + "我今年" + this.age + "岁了");
    }
}

var xiaoming = new People("小明",12);
var xiaohong = new People("小红",11);

xiaoming.sayHello();
xiaohong.sayHello();

这样写可以,但是有什么问题呢,内存开太大

在new一个xiaoming的时候,构造函数中的代码顺序执行,绑定了name,age,sayHello,new一个xiaohong的时候也是如此,你有没有发现,不同的对象拥有相同方法.因此可以将复用的方法放在原型对象上.

    function People(name,age){
        //构造函数里面，负责定义一些属性，随着构造函数的执行，这些属性将绑定到new出来的对象身上
        this.name = name;
        this.age = age;
    }
    //把相同的方法，定义在原型对象身上：
    People.prototype.sayHello = function(){
        alert("你好,我是" + this.name + "我今年" + this.age + "岁了");
    }
    var xiaoming = new People("小明",12);
    var xiaohong = new People("小红",11);
    
    alert(xiaoming.sayHello == xiaohong.sayHello); //true

<style>
  #box {
    font: size 32px;
    color: red;
  }
</style>
</head>

<body>
  <h1></h1>
  <div id="box">wo shi box
  </div>
  <script>
    //函数实例化对象，所有共用的属性就可以放到原型上
    function people(name, age) {
      this.name = name;
      this.age = age;
    }
    var xm = new people('小明', 19);
    var xh = new people('小红', 21);
    console.log(xm.__proto__ === xm.__proto__);  //xh xm是同一个原型
    console.log(xm.sayhello === xh.sayhello);//xh xm sayhello函数不同 将sayhello放到原型上就相等了
    people.prototype.sayhello = function () {
      console.log("大家好");
    }
      console.log(xm.__proto__.constructor);  //实例对象通过原型找到构造函数
  </script>

证明了xiaoming的sayHello方法和xiaohong的，是同一个函数。内存消耗小很多。

示例:

function Grand(){}
Grand.prototype.sex = "male";
var grand = new Grand();

function Father(){
    this.age = 50;
}
Father.prototype = grand;
var father = new Father();

function Son(){
    this.name = "wuwei";
}
Son.prototype = father;
var son = new Son();
console.log(son.name);
console.log(son.age);
console.log(son.sex);
console.log(son.toString()); //[object Object]

五.创建对象的常见的几种模式

1、工厂模式

⼯⼚模式是软件⼯程领域⼀种⼴为⼈知的设计模式，这种模式抽象了创建 具体对象的过程

function createPerson(name,age,family) {
    var o = new Object();
    o.name = name;
    o.age = age;
    o.family = family;
    o.say = function(){
        alert(this.name);
    }
    return o;
}

var person1 =  createPerson("lisi",21,["lida","lier","wangwu"]);   //instanceof无法判断它是谁的实例，只能判断他是对象，构造函数都可以判断出
var person2 =  createPerson("wangwu",18,["lida","lier","lisi"]);
console.log(person1 instanceof Object);                           //true
console.log(person1 instanceof createPerson); //false 工厂模式这个对象不知道谁创建出来的自己，instanceof判断前面的对象是不是后面的函数构造出来的

⼯⼚模式虽然解决了创建多个相似对象的问 题，但没有解决对象识别的问题（但是工厂模式却无从识别对象的类型，因为全部都是Object，不像Date、Array等，本例中，得到的都是o对象，对象的类型都是Object，因此出现了构造函数模式）。工厂模式是自己写的结构，构造函数模式自带结构。

2、构造函数模式

function Person(name,age,family) {
    this.name = name;
    this.age = age;
    this.family = family;
    this.say = function(){
        alert(this.name);
    }
}
var person1 = new Person("lisi",21,["lida","lier","wangwu"]);
var person2 = new Person("lisi",21,["lida","lier","lisi"]);
console.log(person1 instanceof Object); //true
console.log(person1 instanceof Person); //true
console.log(person2 instanceof Object); //true
console.log(person2 instanceof Person); //true // 判断xm是通过哪个函数创建出来的对象
console.log(person1.constructor);      //constructor 属性返回对创建此对象的数组、函数的引用

对比工厂模式有以下不同之处：

1、没有显式地创建对象

2、直接将属性和方法赋给了 this 对象

3、没有 return 语句

可以看出，构造函数知道自己从哪里来（通过 instanceof 可以看出其既是Object的实例，又是Person的实例）

构造函数模式的缺点: 就是每个⽅法都要在每个实例上重新创建⼀遍

3、原型模式

借助函数的原型,将一些实例对象共享的属性和方法放在原型对象中, 这样就不必在构造函数中定义重复的方法

  function Person() {
  }
  
  Person.prototype.name = "lisi";
  Person.prototype.age = 21;
  Person.prototype.family = ["lida","lier","wangwu"];
  Person.prototype.say = function(){
      alert(this.name);
  };
 console.log(Person.prototype);   //Object{name: 'lisi', age: 21, family: Array[3]}
 
 var person1 = new Person();        //创建一个实例person1
 console.log(person1.name);        //lisi
 
 var person2 = new Person();        //创建实例person2
 person2.name = "wangwu";
 person2.family = ["lida","lier","lisi"];
 console.log(person2);            //Person {name: "wangwu", family: Array[3]}
 // console.log(person2.prototype.name);         //报错
 console.log(person2.age);              //21

原型模式的好处是所有对象实例共享它的属性和方法（即所谓的共有属性），
缺点就是省略了为构造函数传递初始值参数,导致所有的实例对象都是相同的属性和方法,

4、混合模式（构造函数模式+原型模式）

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

    function people(name, age) {
      this.name = name;
      this.age = age;
    }
    //没有修改构造函数默认的原型对象，有默认的constructor属性,是灰色的。但是添加属性不方便
    people.prototype.play = function () {
      "我会王者荣耀"
    }
    people.prototype.like = function () {
      "我喜欢看书，乒乓球"
    }
    var xh = new people("小红", 19);
    var xm = new people("小明", 18);
    console.log(xm);
    console.log(xh
    )






    function Person(name, age, family) {
      this.name = name;
      this.age = age;
    }
    Person.prototype = {
      constructor: Person,  //将一个对象赋值给prototype对象，constructor属性需要手动添加，不是默认的。每个函数都有prototype属性，指向该函数原型对象，原型对象都有constructor属性，这是一个指向prototype属性所在函数的指针
      say: function () {
        alert(this.name);
      },//对象属性之间用，号
      play: function () {
        console.log("我很喜欢玩游戏");
      }
    }
    var person1 = new Person("lisi", 21);
    console.log(person1);
    var person2 = new Person("wangwu", 21);
    console.log(person2);

可以看出，混合模式共享着对相同方法的引用，又保证了每个实例有自己的私有属性。最大限度的节省了内存

高程中还提到了动态原型模式，寄生构造函数模式，稳妥构造函数模式, 这些就自己读一读, 了解一下