js面向对象系列一之封装

js面向对象系列一之封装

面向对象三大特性

封装，继承，多态

js当中不像java中有专门的类Class这个概念，但是在js当中也有类似的存在，在es5当中，类就是一个保存了函数的变量，这个函数有自己的方法和属性

封装的定义：把客观事物封装成抽象的类，隐藏属性和方法的实现细节，仅对外公开接口

其实封装就是将属性和方法组成一个类的过程就称之为封装；

封装实现的三种方式，分别是构造函数、原型、在类的外部通过.的语法添加

1-构造函数方法

构造函数添加属性和方法实际上也就是通过this添加的属性和方法

function Cat(name,age){
    // 相当于 this = new Object()
    this.name = name
    this.age = age
    this.eat = function(){
        alert("吃老鼠")
    }
}

// 实例化
var cat1 = new Cat('王花花',7)
var cat2 = new Cat('李栓但',5)

console.log(cat1) 
console.log(cat2)

console.log(cat1.eat == cat2.eat) //引用地址不一致，两个实例

执行结果

通过this方法我们会发现，每次调用 Cat进行实例化时，我们cat1和cat2里的eat方法其实是两个不同的方法，

这么说的意思是，在内存当中存在两个eat方法，而非一个

通过构造函数形式进行封装时好处是彼此之间相互独立，但是对于通用的方法每次都新复制一份存在占用内存资源

 

2.原型prototype方式

原型prototype方式，能够让实例化的对象所使用的方法直接使用指针指向同一个方法，即能够解决构造函数产生的资源浪费现象

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

Catp.prototype.eat = function(){
    alert("吃老鼠")
}

var catp1 = new Catp("王花花",5)
var catp2 = new Catp("李栓但",3)

console.log(catp1)
console.log(catp2)

console.log(catp1.eat == catp2.eat ) //会发现属于同一个引用，提高了运行效率

执行结果

先说下原型链：原型链指的是 实例化的对象会继承 类的原型对象上的属性，js当中，查找一个对象的属性先从其自身查找，当找不到时则沿着原型链一级一级去查找，直到null为止，这也就是为什么实例化的catp1、catp2为什么会有eat方法 的原因

可以看到catp1.eat === catp2.eat， 是true，这就意味着两个实例对象中的eat方法是指向内存中同一个地址的

也就是说eat这个方法只在内存当中创建了一次，以此来节约内存资源

 

3-类的外部通过.语法的添加

function CatC(name,age) {
    this.name = name;
    this.age = age
}
CatC.eat = function(){
    alert("吃老鼠")
}
//实例化后的对象是访问不到的，只有这个类CatC才能访问到
console.log(CatC.eat) 

我们在CatC上添加了一个eat方法

这个eat方法只能通过CatC来访问，其实例化后的对象是不能访问到的

 

这里总结一下三者之间的区别

三者都能在类上添加属性和方法

构造函数：创建时会实例化,会在内存当中复制一份，因而会造成内存的浪费

 

原型：通过原型继承的方法不是自身的，而是在原型连上去一层一层去查找的，只在内存中创建了一次，弊端修改时会影响他对象中相应的属性

 

.语法：创建的属性和方法只会创建一次，但是这样创建的实例化的对象是访问不到的，只能通过类的自身访问