了解javascript里面的封装-优快云博客

本文深入探讨了JavaScript中封装的概念，通过原始模式和构造函数模式的对比，详细讲解了如何创建对象实例，以及如何利用构造函数和prototype模式提高代码效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 //                       封装

//生成实例对象的原始模式
//假如我们把一个动物看成一个对象

var cat = { //那么它有名字和颜色两个属性
    name:'',    
    color:''
};


//接下来我们根据原形对象来生成实例对象

var cat1 = {};  //创建一个空对象
cat1.name = "猫";   //按照原形对象的属性赋值
cat1.color = "黑色";

//这就是最简单的封装
//原始模式的缺点：如果我们要创建多个对象，那么代码会比较麻烦，并且我们看不出实例对象与原型之间有任何联系。



//改进：
//我们可以写一个函数，解决代码重复的问题
function Cat( name, color){
    return{
        name : name,
        color : color
    }
}

//然后生成实例对象，就相当于是在调用函数。但是这两个实例对象并没有什么联系，不能反映出它们是同一个原型对象
var Cat1 = new Cat("猫","黑色");
var Cat1 = new Cat("猫","黄色");




//构造函数模式
//构造函数模式可以解决从原形对象生成实例的问题
//构造函数就是在一个普通的函数的内部使用了this变量，并且可以通过new一个构造函数来生成实例，并且this会绑定在实例对象上
function Cat(name, color){
    this.name = name;
    this.color = color;
}

var Cat1 = new Cat("猫","蓝色");
var Cat2 = new Cat("猫","绿色");
console.log(Cat1);
console.log(Cat2);

//生成的实例对象会有一个constructor属性,constructor可以指向它们的构造函数;
alert(Cat1.constructor == Cat);     //true
alert(Cat1 instanceof Cat);     // true  instanceof可以验证原型对象与实例对象之间的关系





//构造函数模式浪费内存问题

function Cat(name, color){
    this.name = name;
    this.color = color;
    this.typ = "hello",
    this.ce = function(){
        console.log("我是ce")
    }
}

var Cat1 = new Cat("name", "color");
var Cat2 = new Cat("name1", "color1");
alert(Cat1.typ+Cat1.ce());
alert(Cat2.typ+Cat2.ce()); 

/*会弹出 属性并且会执行ce()方法，问题来了，如果我们有很多个实例对象,
那么就会有很多个this.typ属性和ce()方法，并且里面的值都是重复的，这样会浪费不必要的内存以及效率。

prototype模式
js规定了每个构造函数都有一个prototype属性，指向另一个对象，这个对象的所有属性和方法都会被构造函数
的实例和方法继承，这样我们可以把那些不变的属性和方法定义在prototype对象上。
*/



function Cat(name){
    this.name = name;
}
Cat.prototype.iio = "prototype";
Cat.prototype.ce = function (){ console.log("方法")}

var Cat1 = new Cat();
var Cat2 = new Cat();
console.log(Cat1.iio);      //打印：prototype
Cat1.ce();                  //打印：方法
console.log(Cat2.iio);      //打印：prototype
//这时的iio属性和ce方法其实都是同一个内存地址，指向prototype对象，因此提高了效率

alert(Cat.prototype.isPrototypeOf(Cat1)); 
//返回true   isPrototypeOf()方法用来判断某个prototype对象和某个实例之间的关系

alert(Cat1.hasOwnProperty("name")) //返回true
alert(Cat1.hasOwnProperty("iio")) //返回false
//用来判断某一属性到底是本地属性还是继承prototype对象的属性

alert("name" in Cat1);
for(var prop in Cat1){ console.log(cat1[prop])}
//可以判断某个实例是否有某个属性，无论是本地的还是继承的，并且还可以遍历某个对象的所有属性