构造函数和原型

在典型的OOP 的语言中（如Java），都存在类的概念，类就是对象的模板，对象就是类的实例，但在ES6之前，JS 中并没用引入类的概念。ES6，全称ECMAScript6.0 ，2015.06 发版。但是目前浏览器的JavaScript 是ES5 版本，大多数高版本的浏览器也支持ES6，不过只实现了ES6 的部分特性和功能。在ES6之前，对象不是基于类创建的，而是用一种称为构建函数的特殊函数来定义对象和它们的特征。

创建对象可以通过以下三种方式：

对象字面量

var obj = {// 属性名 ：属性值// 键值对// 成员name : '张三丰',age : 22,sex : '男',lanqiu : function () {console.log('打篮球');}};// obj.keyvar wahahaobj = {}// console.log( obj );// console.log( obj.lanqiu );// console.log( obj.age );// obj.lanqiu();// console.log( obj.name );// console.log( obj['name'] );// 遍历对象for ( var key in obj ) {console.log( obj[key] );// console.log( obj.key );}

new Object()【构造函数】

构造函数也是函数，只不过用法不同，需要和new一起使用才有意义，就可以new出来一个对象// 构造函数创建对象var o = new Object();// console.log( o instanceof Object );// console.log( n instanceof Array );// console.log( o );// 添加属性// 设置：对象.属性名 = 值；o.uname = '李寻欢';o.age = 22;o.fei = function () {console.log('’飞飞飞');};// console.log( o.uname );// o.fei();

自定义构造函数

function Person (uname, age) {this.uname = uname;this.age = age;this.chang = function () {console.log('change');}
}// var obj = new Person();// console.log(obj);var obj = new Person('假冰冰', 22);console.log( obj );var obj1 = new Person('刘德华', 17);console.log(obj1);

课件练习：自定义一个构造函数，可以new出一个对象，属性：姓名，年龄，性别，武器方法：打人，逃跑function Hero (uname, age, sex, weapon) {this.uname = uname;this.age = age;this.sex = sex;this.weapon = weapon;// 方法this.gongji = function () {console.log('打打打');}this.pao = function () {console.log('跑跑跑，赶紧跑eqdfabcdf连气泡');}}// 实例化var hz = new Hero('皇子', 16, '男', '矛');// console.log( hz );console.log( hz.uname );hz.pao();

工厂模式

构造函数和原型

构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与new一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。function Fn () {}

在JS 中，使用构造函数时要注意以下两点：

1.构造函数用于创建某一类对象，其首字母要大写

2.构造函数要和new 一起使用才有意义

练习判断构造函数还是普通函数在使用的时候查看是否与new结合使用

new在执行时会做四件事情

在内存中创建一个新的空对象。
让this指向这个新的对象。
执行构造函数里面的代码，给这个新对象添加属性和方法。
返回这个新对象（所以构造函数里面不需要return）。

静态成员和实例成员

JavaScript 的构造函数中可以添加一些成员，可以在构造函数本身上添加，也可以在构造函数内部的this 上添加。通过这两种方式添加的成员，就分别称为静态成员和实例成员。

静态成员：在构造函数本上添加的成员称为静态成员，只能由构造函数本身来访问
实例成员：在构造函数内部创建的对象成员称为实例成员，只能由实例化的对象来访问

function Person (uname, age) {this.uname = uname;this.age = age;this.say = function () {console.log(123);}}var obj = new Person('张三丰',22);	console.log(obj.uname);// console.log( Person.uname );Person.leibie = '人';console.log(Person.leibie);console.log(obj.leibie);

ES6：字面量，构造函数，自定义构造函数

new执行过程：1.创建空对象，2.this指向这个对象，3.指向函数里面的代码，4.返回这个对象

成员：静态成员【Star.sex = ‘男’】，实例成员【function Star () {成员}】

构造函数小问题：

当实例化对象的时候，属性好理解，属性名属性值，那么方法是函数，函数是复杂数据类型那么保存的时候是保存地址，又指向函数，而每创建一个对象，都会有一个函数，每个函数都得开辟一个内存空间，此时浪费内存了，那么如何节省内存呢，我们需要用到原型方法放到构造函数里面，如果多次实例化，会浪费内存

function Star (uname, age) {this.uname = uname;this.age = age;this.sing = function () {console.log(this.name + '在唱歌');}
}var ldh = new Star('周星驰', 22);
var ldh = new Star('刘德华', 22);

在这里插入图片描述

构造函数原型prototype

什么是原型对象：就是一个属性，是构造函数的属性，这个属性是一个对象，我们也称呼，prototype 为原型对象。

每一个构造函数都有一个属性，prototype

作用：是为了共享方法，从而达到节省内存

注意：每一个构造函数都有prototype属性

例如：大家来学校上学，有的开车，有的汽车，有的开飞机，等等，此时浪费，那么准备一个大巴车，方便有节省

构造函数通过原型分配的函数是所有对象所共享的。

JavaScript 规定，每一个构造函数都有一个prototype 属性，指向另一个对象。注意这个prototype 就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有。我们可以把那些不变的方法，直接定义在prototype 对

象上，这样所有对象的实例就可以共享这些方法。

function Star (uname, age) {this.uname = uname;this.age = age;// this.sing = function () {// 	console.log(this.name + '在唱歌');// }}Star.prototype.sing = function () {console.log(this.uname + '在唱歌');}var zxc = new Star('周星驰', 22);var ldh = new Star('刘德华', 22);// console.log( Star.prototype );ldh.sing();zxc.sing();

总结：所有的公共属性写到构造函数里面，所有的公共方法写到原型对象里面

疑问：为何创建一个对象，都可以自动的跑到原型对象上找方法

因为每一个对象都有一个属性，对象原型，执行原型对象

对象原型：proto

主要作用：指向prototype

构造函数和原型对象都会有一个属性____proto____ 指向构造函数的prototype 原型对象，之所以我们对象可以使用构造函数prototype 原型对象的属性和方法，就是因为对象有__proto__ 原型的存在。

注意：____proto____是一个非标准属性，不可以拿来赋值或者设置【只读属性】

1.____proto____对象原型和原型对象prototype 是等价的2.____proto____对象原型的意义就在于为对象的查找机制提供一个方向，或者说一条路线，但是它是一个非标准属性，因此实际开发中，不可以使用这个属性，它只是内部指向原型对象prototype

在这里插入图片描述

总结：每一个对象都有一个原型，作用是指向原型对象prototype

统一称呼：____proto____原型，prototype成为原型对象

在这里插入图片描述

每一个构造函数都有一个：prototype【原型对象】(作用：存方法)每一个对象都有一个：__proto__对象原型，（作用：指向prototype）

constructor 构造函数

记录是哪个构造函数创建出来的

指回构造函数本身

原型（proto）和构造函数（prototype）原型对象里面都有一个属性constructor属性，constructor 我们称为构造函数，因为它指回构造函数本身。constructor 主要用于记录该对象引用于哪个构造函数，它可以让原型对象重新指向原来的构造函数。一般情况下，对象的方法都在构造函数的原型对象中设置。如果有多个对象的方法，我们可以给原型对象采取对象形式赋值，但是这样就会覆盖构造函数原型对象原来的内容，这样修改后的原型对象constructor 就不再指向当前构造函数了。此时，我们可以在修改后的原型对象中，添加一个constructor 指向原来的构造函数。

总结：constructor 主要作用可以指回原来的构造函数

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

在这里插入图片描述

1、每个构造函数都有一个属性：prototype(原型对象)，作用：存方法节省内存

2、每个对象都有一个属性：proto(对象原型)，作用：指向prototype

3、每个原型对象都有一个属性：constructor，作用：指回构造函数本身

思考：如果传入一个对象给原型对象添加方法呢

Star.prototype = {sing : function () {},dance: function () {}
};此时会覆盖原先prototype中的内容，传入一个新的对象，那么此时就不知道构造函数是哪个了
所以我们要指回构造函数：constructor：构造函数

课程回顾：

1、创建对象：字面量，构造函数，自定义构造函数

2、new执行过程：创建新对象，this指向这个对象，执行代码，返回这个对象

3、静态成员实例成员：

构造函数身上的成员，称为静态成员，只能由构造函数去访问

构造函数内部的成员，称为实例成员，只能由实例对象去访问

4、原型对象：构造函数的一个属性，prototype（原型对象），作用：存方法省内存

5、对象原型：对象的一个属性(proto)，作用：指向prototype

6、构造函数：constructor，作用：指回构造函数本身

js高级第二天

构造函数和原型