学习js的朋友们都知道，面向对象是最难理解的一个部分，下面给大家分享一下对象object的理解，本篇文章主要分享面对对象的封装。
一，关于实例对象的原始模式
首先我们知道每个物体都是一个对象，举例来说，“狗”作为一个对象，他有“种类”和“颜色”两个属性。
var Dog = {
type : '',
color: ''
}
然后，我们需要创建两个实例化对象
var dog1 = {
type : '中华田园犬',
color: '灰色'
}
var dog2 = {
type : '秋田犬',
color: '白色'
}
这也是最基础的对象封装，也就是把“种类”和“颜色”两个属性放在一个对象里面。但是问题来了，这种写法有两个问题：一是如果要生成很多个实例化对象，就需要重复很多遍，很麻烦;二是他们与原型Dog结构很相似，但是实际上没有建立直接的联系。
二，原始模式升级
重复的代码，我们可以写一个函数来解决
function Dog(type,color){
return {
type : type ,
color : color
}
}
接着再调用函数，生成实例化对象
var dog1 = Dog("中华田园犬",'灰色');
var dog2 = Dog("秋田犬",'白色');
这种方法可以解决生成多个实例化对象代码复杂的问题，但是dog1和dog2之间没有产生关联，也就是依然没有体现出他们其实是原型对象Dog的实例。
三，构造函数
为了解决让实例化对象需要从原型对象生成的问题，js提供了构造函数这样一个概念。当然其实构造函数本质上也就是一个普通函数，只不过函数内部使用了this，为了区分于普通函数，我们一般对构造函数首字母大写，具体代码如下：
function Dog(type,color) {
this.type = type ;
this.color = color ;
}
有了这个构造函数，我们就可以生成实例化对象了，具体代码如下：
var dog1 = new Dog("中华田园犬",'灰色');
var dog2 = new Dog("秋田犬",'白色');
这里我们可以看到关键字new , 也就是实际上Dog是一个对象，dog1和dog2是Dog这个对象的实例化对象;为了验证这一点，js提供了一个属性constructor，此属性用于指向他们的构造函数
console.log(dog1.constructor == Dog) // true
console.log(dog2.constructor == Dog) // true
当然，js还有另一个运算符 instanceof，可以验证原型对象与实例化对象之间的关系。
console.log(dog1 instanceof Dog) // true
console.log(dog2 instanceof Dog) // true
到构造函数这里看似已经很完美了，但是，这里存在一个很大的弊端，也就是内存浪费。举例来说，我们现在给Dog对象添加一个不变的属性和方法如下：
function Dog(type,color) {
this.type = type ;
this.color = color ;
this.age = 2 ;
this.eat = function(){
console.log('狗吃骨头')
}
}
当然这里生成实例化方法也还是一样的，但是这里会有一个很大的问题：也就是我们会发现age属性和eat()方法明明是一模一样的内容，但是由于每次生成实例化对象时，都会生成同样的内容，多造成内存浪费。
console.log(dog1.eat == dog2.eat); // false
如果能让age和eat()在内存中只生成一次，让实例化对象指向同一个内存地址就更完美了。
四，prototype模式
js为每一个构造函数都提供了一个prototype属性，让他指向另一个对象，而这个对象的所有属性和方法都会被构造函数的实例对象继承。这也就意味着，只要我们把那些不变的属性和方法定义在prototype对象上即可。
function Dog(type,color) {
this.type = type ;
this.color = color ;
}
Dog.prototype.age = 2 ;
Dog.prototype.eat = function(){
console.log('狗吃骨头')
}
接着再生成实例，此时，所有实例的age个eat()方法都会指向同一个内存地址，也就是prototype对象，这样也就避免了内存浪费问题，从而提供运行效率。
console.log(dog1.eat == dog2.eat); // true
当然为了验证这一问题，js定义了一些辅助属性。
1. isPrototypeOf() , 此方法用于验证prototype对象和实例化对象之间的关联
console.log(Dog.prototype.isPrototypeOf(dog1)); // true
console.log(Dog.prototype.isPrototypeOf(dog2)); // true
2. HasOwnProperty() , 每个实例化对象都有此方法，顾名思义，这个方法是用于验证属性是自有的还是继承自prototype对象的 ; 这里很显然type是自有属性，而age是继承自prototype对象。
console.log(dog1.hasOwnProperty('type')) // true
console.log(dog1.hasOwnProperty('age')) // false
更多关于前端培训的问题，欢迎咨询千锋教育在线名师。千锋教育拥有多年IT培训服务经验，采用全程面授高品质、高体验培养模式，拥有国内一体化教学管理及学员服务，助力更多学员实现高薪梦想。
京公网安备 11010802030320号