面向对象编程
什么是对象??
(1) 从视觉角度 : 对象是单个事物的抽象。
一本书、一个人都可以是对象,一张网页、一个与远程服务器的连接也可以是对象。当实物被抽象成对象,实物之间的关系就变成了对象之间的关系,从而就可以模拟现实情况,针对对象进行编程。
(2) 从编程角度 : 对象是无序键值对的集合,其属性可以包含基本值、对象或者函数等等
每个对象都是基于一个引用类型创建的,这些类型可以是系统内置的原生类型,也可以是开发人员自定义的类型。
什么面向对象 ?
面向对象编程 —— Object Oriented Programming,简称 OOP ,是一种编程开发思想。
它将真实世界各种复杂的关系,抽象为一个个对象,然后由对象之间的分工与合作,完成对真实世界的模拟。
在面向对象程序开发思想中,每一个对象都是功能中心,具有明确分工,可以完成接受信息、处理数据、发出信息等任务。
因此,面向对象编程具有灵活、代码可复用、高度模块化等特点,容易维护和开发,比起由一系列函数或指令组成的传统的过程式编程(procedural programming),更适合多人合作的大型软件项目。
员工才面向过程,老大都是面向对象
面向对象与面向过程:
面向过程就是亲历亲为,事无巨细,面面俱到,步步紧跟,有条不紊,面向过程是解决问题的一种思维方式,关注点在于解决问题的过程。
面向对象就是找一个对象,指挥得结果,解决问题的思维方式,关注点在解决问题的对象上。
面向对象将执行者转变成指挥者
面向对象不是面向过程的替代,而是面向过程的封装
面向对象的特性:
- 封装性
- 将功能的具体实现,全部封装到对象的内部,外界使用对象时,只需要关注对象提供的方法如何使用,而不需要关心对象对象的内部具体实现,这就是封装。
- 继承性
- 在js中,继承的概念很简单,一个对象没有的一些属性和方法,另外一个对象有,<!-- 拿过来用,就实现了继承。-->
- 注意:在其他语言里面,继承是类与类之间的关系,在js中,是对象与对象之间的关系。
- [多态性]
- 多态是在强类型的语言中才有的。js是弱类型语言,所以JS不支持多态。
创建对象的方式:
单独创建 ( 2种 ) 和 批量创建 ( 2种 )
字面量创建对象
缺点 : 不能很方便的批量创建
var person = {
name: 'Jack',
age: 18,
sayName: function () {
console.log(this.name)
}
}
构造函数 Object 创建对象
缺点 : 属性要一个一个的添加,也是 不能很方便的批量创建,
//在js中,对象有动态特性,可以随时的给一个对象增加属性或者删除属性。
var person = new Object()
person.name = 'Jack'
person.age = 18
person.sayName = function () {
console.log(this.name)
}
工厂函数 创建对象
缺点 : 但却没有解决对象识别的问题,创建出来的对象都是Object类型的。
// 工厂函数
function createPerson (name, age) {
return {
name: name,
age: age,
sayName: function () {
console.log(this.name)
}
}
}
// 实例对象
var p1 = createPerson('Jack', 18)
var p2 = createPerson('Mike', 18)
自定义构造函数创建
function Person (name, age) {
this.name = name
this.age = age
this.sayName = function () {
console.log(this.name)
}
}
var p1 = new Person('Jack', 18)
p1.sayName() // => Jack
var p2 = new Person('Mike', 23)
p2.sayName() // => Mike
注意点:
1. 构造函数 => 函数 + 首字母大写
2. 构造函数要配合new操作赋一起使用才有意义
3. new的作用 : (牢记)
- 创建一个新对象
- this指向了这个新对象
- 执行构造函数, 给对象添加属性和方法
- 返回新对象
4. 构造函数的作用 : 实例化对象 即:给对象赋值,添加属性和方法
构造函数的缺点 :
使用构造函数带来的最大的好处就是创建对象更方便了,但是其本身也存在一个浪费内存的问题:
function Person (name, age) {
this.name = name
this.age = age
this.type = 'human'
this.sayHello = function () {
console.log('hello ' + this.name)
}
}
var p1 = new Person('lpz', 18)
var p2 = new Person('Jack', 16)
console.log(p1.sayHello === p2.sayHello) // => false
解决方案 :
// 全局声明的
function sayHello () {
console.log('hello ' + this.name)
}
function Person (name, age) {
this.name = name
this.age = age
this.type = 'human'
// 先有的sayHello, 你再去指引的
this.sayHello = sayHello
}
var p1 = new Person('lpz', 18)
var p2 = new Person('Jack', 16)
console.log(p1.sayHello === p2.sayHello) // => true
缺点:会暴漏很多的函数,容易造成全局变量污染。
原型
原型的基本概念
Javascript 规定,每一个构造函数都有一个 prototype
属性,指向另一个对象。这个对象的所有属性和方法,都会被构造函数( Person() )的实例 ( p、p1等 )继承 。 这个对象就是原型,也叫原型对象。
这也就意味着,我们可以把所有对象实例需要共享的属性和方法直接定义在 prototype
对象上。
原型的作用 : 共享数据 (也解决了构造函数资源浪费的问题)
// 原型:
//1. 在js中, 任何一个函数,都会自带一个属性 prototype, 这个属性指向了一个对象
//2. 这个prototype属性,也就是这个对象,我们叫做原型 ; (原型对象)
// 这个原型属性是一个对象
//3. 通过构造函数创建的对象,可以直接访问这个构造函数的原型中的所有内容(属性和方法)
//4. 最常用的就是 : 给构造函数的原型添加一个方法
代码 :
function Person (name, age) {
this.name = name
this.age = age
}
// dir 或者 log
console.log(Person.prototype)
Person.prototype.type = 'human'
Person.prototype.sayName = function () {
console.log(this.name)
}
var p1 = new Person(...)
var p2 = new Person(...)
console.log(p1.sayName === p2.sayName) // => true 解决了内容浪费的问题
这时所有实例的 type
属性和 sayName()
方法,其实都是同一个内存地址,指向 prototype
对象,因此就提高了运行效率。
构造函数、实例、原型三者之间的关系 (★★★)
构造函数 (Person):构造函数就是一个函数,配合new可以新建对象。
实例 (p1, p2):通过构造函数实例化出来的对象我们把它叫做构造函数的实例。一个构造函数可以有很多实例。
原型 (Person.prototype) :每一个构造函数都有一个属性prototype
,这个属性就叫做原型对象。通过构造函数创建出来的实例能够直接使用原型上的属性和方法。
构造+实例p,打印Person,有prototype属性,画图分配空间,newp,访问原型 p1亦是
注意:方法是给原型加,不是给构造函数加,方法是原型里的方法
继承关系:
实例对象p, 从Person.prototype里访问属性和方法,,这就叫继承 ; (拿过来用)
也就是说 :以后p想要找某个属性或者某个方法,,如果自己没有,,试着去看下原型里是否有
思考:内置对象中,有很多的方法,这些方法存在哪里?
var arr = [] , arr.push() Array.prototype;
var str = 'abc' str.indexOf() => String.prototype
__proto__
(★)
实例对象p和原型对象的关系呢?
通过构造函数创建的对象,自带一个__proro__
属性,这个属性指向了构造函数的prototype属性,也就是原型对象。
获取原型对象:
-
通过
构造函数.prototype
可以获取 -
通过
实例.__proto__
可以获取(隐式原型) -
它们指向了同一个对象
构造函数.prototype === 实例.__proto__
-
又因为是浅白色,,这种是私有属性,,不可遍历的,,,,,不要用它来添加属性和方法,,只负责来检测它的原型即可
console.log(p.__proto__ === Person.prototype);
关系确立
1. 构造函数 是 妈妈,,妈妈只负责生孩子,,创建对象p
2. 原型对象是 爸爸,,,,实例对象能够继承原型对象的属性和方法
constructor属性 (☆)
默认情况下,原型对象中值包含了一个属性:constructor,constructor属性指向了当前的构造函数。
原型链
属性查找原则
构造函数实例化的对象 p , 能够访问原型对象里的全部属性和方法
-
如果是获取操作
-
沿着
__proto__
一直往上找1. 会先在自身上查找,如果没有 2. 则根据__proto__对应的原型去找,如果没有 3. 一直找到Object.prototype,如果没有,那就找不到了。
-
如果是修改操作
//1. 只会修改对象自身的属性, //2. 如果自身没有这个属性,那么就会添加这个属性,并不会修改原型中的属性。
原型链概念
任何一个对象,都有原型对象,原型对象本身又是一个对象**,所以原型对象也有自己的原型对象,这样一环扣一环就形成了一个链式结构,我们把这个链式结构称为:原型链。
__ proto __
//1. var s = new Strudent();
//2. var o = new Object();
//3. var arr = new Array();;
//4. var date = new Date();
//5. Math
总结:Object.prototype是原型链的尽头,Object.prototype的原型是null。
画图的本质 :
1. 通过打印 : p.__proto__ (原型对象) 来找
2. 找到 p.__proto__ (原型对象里的) constructor 的属性
3. 找到构造函数 其他的就解决了
//var date = new Date();
// date ==> date.__proto__(Dat