面向对象

1.对象与类的创建

对象

指“事物”在程序设计语言中的表现形式。 比如： 对于猫这种常见对象来说，他们具有颜色，名字，提醒等某些明确的特征，他们可以执行喵喵叫，睡觉，躲起来这些动作。

对象的组成：

属性 特性、特征 名词 变量方法 功能、行为 动词 函数

类

相似对象之间往往都有一些共同的组成特征。例如蜂鸟和老鹰都属于鸟类。对象这个词有时候可能会叫做实例，所以我们可以说老鹰是鸟类的一个实例，我们可以基于同一个类创建出许多不同的对象。

类更像是一种模版，对象则是在这些模版的基础上被创建出来的实体依靠的是一套原型（prptptype）系统

2.创建对象的方法

使用字面量方式直接创建对象 此种方式没有类的概念，直接创建的就是对象 使用函数 此种方式创建的函数，就相当于类的概念，使用 new 运算符调用构造函数在创建这个函数对应的实例对象 使用 class 关键字创建类，使用 new 运算符创建对象 此种方式就与其他面向对象语言中创建类和对象的方式一样了，在 ES6 后支持，IE11 及一下都不支持

2.1字面量

//字面量创建对象var p1 = {name: '田思雨', //属性age: 18， //属性speak:function(){console.log('小田有点懵...');} //方法}console.log(p1.name);p1.speak();//输出结果田思雨小田有点懵...

2.2构造函数

使用构造函数

JS从面向过程编程向面向对象编程过渡期间的一个产物

因为在JS中，以前是不支持class 关键字，所以就是用function来模拟类

function Person(){this.name='秦奋' //属性this.age=29 //属性this.speak=function(){console.log('我很热爱舞台');} //方法}//实例化对象var p2=new Person();console.log(p2.name);p2.speak();//输出结果秦奋我很热爱舞台

2.3创建类

ES6之后可以使用class 关键字创建类，使用new运算符创建类的实例

class Dog{//构造函数：方法名必须是 constructorconstructor(){this.brand='蝴蝶犬'this.gender='女'}speak(){console.log('汪汪汪');}}//调用的是Dog类中的构造函数，也就是说，识要执行new语句，就会执行Dog类中的构造函数var p3=new Dog()console.log(p3.brand);p3.speak()//输出蝴蝶犬汪汪汪

class Dog{//构造函数：方法名必须是 constructorconstructor(brand,gender,name){this.brand=brandthis.gender=genderthis.name=name}speak(){console.log('汪汪汪');}}//调用的是Dog类中的构造函数，也就是说，识要执行new语句，就会执行Dog类中的构造函数var p4=new Dog('蝴蝶犬','女','毛毛')console.log(p4.brand);console.log(p4.gender);console.log(p4.name);var p5=new Dog('金毛','男','图图')console.log(p5.brand);console.log(p5.gender);console.log(p5.name);//输出结果蝴蝶犬女毛毛金毛男图图

构造函数

所有类的构造函数名称都是 constructor使用 new 运算符创建对象时，调用的就是类的构造函数，也就是说new对象时，会执行类的构造函数构造函数一般用来初始化类的数据，如属性的值this.name=name，表示向类添加一个 name 属性，值为传入的参数

注意哟:

通过class 关键字创建类, 类名我们还是习惯性定义首字母大写类里面有个constructor 函数,可以接受传递过来的参数,同时返回实例对象constructor 函数 只要 new 生成实例时,就会自动调用这个函数, 如果我们不写这个函数,类也会自动生成这个函数多个函数方法之间不需要添加逗号分隔生成实例 new 不能省略语法规范, 创建类 类名后面不要加小括号,生成实例 类名后面加小括号, 构造函数不需要加function

补充

//通过Object创建var Dog=new Object()Dog.name='图图'Dog.age=3consloe.log(Dog);

3.类的继承

语法

// 父类class Father{ } // 子类继承父类class Son extends Father { }

//父类class Father {constructor(name，age)this.name = namethis.age = age}}//字类class son extends Father{}var s=new Son('小田',19)console.log(s);//输出结果小田19

总结：

extends 关键字左边是子类，右边是父类子类会继承父类的属性和方法，构造函数也会继承（对比父亲和儿子）

3.1子类可以有自己的成员

//父类class Father {speak(){console.log('父类方法');}}//字类class son extends Father{//子类自己的方法detroy(){console.log('子类方法');}}var s=new Son()s.speak()s.detroy()//输出结果父类方法子类方法

如果子类里面方法和父类里面方法一样，则调用子类里面方法。

子类里面没有，就会去父类里面找(调用)

单继承，一个子类只有一个父类

3.构造函数继承

子类会自动继承父类的构造函数

如果父类中没有声明构造函数，也会有一个默认的无参构造函数，这个函数子类也会继承

如果父类中有声明了构造函数，子类中也声明了构造函数，则在子类的构造函数中编写代码之前，一定要使用super关键字调用父类的构造方法

class Dog {constructor(name,age) {this.name = namethis.age=age}}class Husky extends Dog {constructor(level) {super('图图',18);// 调用父类构造函数，并传递参数this.level = level;}}var h = new Husky(7);console.log(h.name,h.age, h.level);//输出结果图图187

class Dog {constructor(name,age) {this.name = namethis.age=age}}class Husky extends Dog {constructor(name,age,level) {super(name,age);// 调用父类构造函数，并传递参数this.level = level;}}var h = new Husky('图图',19,7);console.log(h);//输出结果图图197

4.原型对象上添加方法

使用原型改造构造函数

1）每一个构造函数都有一个prototype属性，此属性的值是一个对象，这个对象叫做当前构造函数的原型对象

2）原型对象上的所有的属性和方法，构造函数中也都会拥有

3）所以将方法定义到原型对象上，可以让多个构造函数的对象共享一个方法

function Person(name, age) {this.run=function(){console.log('run');}}// 将方法定义到原型上Person.prototype.speak = function () {console.log("hello world");};var p1 = new Person("图图", 10);var p2 = new Person("大耳朵", 8);console.log(p1.speak === p2.speak); // trueconsole.log(p1.run === p2.run); // false

5.静态成员

构造函数中的成员分为两种:实例成员和静态成员，我们下面以属性为例

通过new关键字创建的就是构造函数的实例

所谓实例属性就是只能通过构造函数的实例访问

静态属性只能通过类名.属性名称的方式访问 //使用类名.属性访问

function Car(brand){this.brand=brand //实例属性Car.count=0 //静态属性 static}var c1=new Car('大众');console.log(c1.brand);// 获取静态属性countconsole.log(Car.count);//输出结果大众0

也可以用实例方法访问静态成员

function Car(brand){this.brand=brand //实例属性if(Car.count==undefined){Car.count=0}Car.count++}var c1 = new Car('大众')console.log(Cor.count);var c2 = new Car('兰博基尼')console.log(Cor.count);//输出结果12

6.原型

prototype 与 proto

构造函数有一个原型对象，通过prototype获取基于构造函数创建对象后，每个对象都有一个私有的proto属性，指向兑现的构造函数的原型对象基于上面两点，构造函数 prototype 属性与对象的proto属性指向的是同一个对象prototype构造函数的属性proto对象的属性

遵循ECMAScript标准，someObject.[[Prototype]]符号是用于指向someObject的原型。从 ECMAScript 6 开始，[[Prototype]]可以通过Object.getPrototypeOf()和 **Object.setPrototypeOf()**访问器来访问。这个等同于 JavaScript 的非标准但许多浏览器实现的属性__proto__。

constructor构造函数

对象原型（proto）和构造函数（prototype）原型对象里面都有一个属性 constructor 属性 ，constructor 我们称为构造函数，因为它指回构造函数本身

function Car(brand) {this.brand = brand // 实例属性 }Car.prototype.drive = function(){console.log('骑着我心爱的小毛驴');}cobsole.log(Car.prototype);var c1 = new Car();c1.drive()//输出结果骑着我心爱的小毛驴//解析Car.prototype 有一个 constructor 属性constructor 属性 所指的是 Car 的构造函数

7.原型链

原型链是实例对象与原型之间的链接

构造函数的prototype属性指向了构造函数原型对象

构造函数的原型对象的constructor属性指向了构造函数

实例对象是由构造函数创建的,实例对象的__proto__属性指向了构造函数的原型对象

看一下图片

8.this指向

1.函数调用模式

全局对象，在浏览器环境下就是window对象

2…构造函数模式

this 指代的是 创建的构造函数 的 对象实例

3.在构造函数的原型对象

this 指代的是 创建的构造函数 的 对象实例

9.扩展数组内置方法

var arr=new Array()console.log(arr.__proto__);console.log(arr.prototype);var arr1=[]console.log(arr1.__proto__);

arr 里面的属性

Array.prototype.sum = function () {var sum = 0;this.forEach(function (item) {sum += item;});return sum};var arr = [1,2,3,4,5];console.log(arr.sum());;//此时数组对象中已经存在sum()方法了 可以始终 数组.sum()进行数据的求

10.call方法

call 可以调用函数call 可以修改this的指向,使用call()的时候 参数一是修改后的this指向,参数2,参数3…使用逗号隔开连接

call()方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。

function f1(){console.log('f1');}//输出的结果一致 f1f1();f1.call();

function Car(){console.log('f1');}//输出的结果 f1Car.call();

call()方法 的语法格式是 函数引用.call(调用者,参数1,参数2,参数3)

function Person(name,age){this.name=name;this.age=age;}function Chinese(name,age,hukou){Person.call(this,name,age)this.hukou=hukou;}var c1=new Chinese('小田',19,'河北定州');console.log(c1);//输出的结果小田 19 河北定州