javascript面相对象编程，封装与继承

一、封装

　　var line = '<div>----------------------------------------------</div>';
 //1.对象的原始模式
　　var obj = {name : '', color : ''}
 生成两个实例对象

　　var hengda = {}; // 创建一个空对象
　　hengda.name = "恒达"; // 按照原型对象的属性赋值
　　hengda.color = "蓝色";

　　var daolan = {};
　　daolan.name = "导览";
　　daolan.color = "绿色";

　　console.log(hengda);
　　console.log(daolan);

　　document.write(JSON.stringify(hengda));
　　document.write(JSON.stringify(hengda));

　　document.write(line);
// 这就是最简单的封装了，把两个属性封装在一个对象里面。但是，这样的写法有两个缺点，一是如果多生成几个实例，写起来就非常麻烦；二是实例与原型之间，没有任何办法，可以看出有什么联系。
// 2.原始模式的改进，写一个函数，解决代码重复的问题

　　function newObj(name,color) {
　　　　return {
　　　　　　name:name,
　　　　　　color:color
　　　　}
　　}
// 然后生成实例对象，就等于是在调用函数：
　　var hengda = newObj("恒达","蓝色");

　　var daolan = newObj("导览","绿色");

　　document.write(JSON.stringify(hengda));
　　document.write(JSON.stringify(hengda));

// 这种方法的问题依然是，hengda和daolan之间没有内在的联系，不能反映出它们是同一个原型对象的实例。
　　document.write(line);

// 2. 构造函数模式,为了解决从原型对象生成实例的问题，Javascript提供了一个构造函数（Constructor）模式。
// 所谓"构造函数"，其实就是一个普通函数，但是内部使用了this变量。对构造函数使用new运算符，就能生成实例，并且this变量会绑定在实例对象上。
　　function hengdaObj(name,color){
　　　　this.name=name;
　　　　this.color=color;
　　}
// 生成实例对象
　　var hengda = new hengdaObj("恒达","蓝色");
　　var daolan = new hengdaObj("导览","绿色");
　　document.write(JSON.stringify(hengda));
　　document.write(JSON.stringify(daolan));

// 这时hengda和daolan会自动含有一个constructor属性，指向它们的构造函数。
　　document.write('<br> hengda--constructor:' + (hengda.constructor == hengdaObj)); //true
　　document.write(', daolan--constructor:' + (daolan.constructor == hengdaObj)); //true

// Javascript还提供了一个instanceof运算符，验证原型对象与实例对象之间的关系
　　document.write('<br> hengda--instanceof :' + (hengda instanceof hengdaObj)); //true
　　document.write(', daolan--instanceof :' + (daolan instanceof hengdaObj)); //true

　　document.write(line);

// 4.构造函数模式的问题,构造函数方法很好用，但是存在一个浪费内存的问题
// 改造，为hengdaObj对象添加一个不变的属性position，再添加一个方法make。那么，原型对象hengdaObj就变成了下面这样：
　　function hengdaObj(name,color){
　　　　this.name = name;
　　　　this.color = color;
　　　　this.position = "天津";
　　　　this.make = function(){
　　　　console.log("挣钱");
　　　　};
　　}
// 生成实例对象
　　var hengda = new hengdaObj("恒达","蓝色");
　　var daolan = new hengdaObj("导览","绿色");
　　document.write(JSON.stringify(hengda));
　　document.write(JSON.stringify(daolan));
　　document.write('<br>hengda.position:');
　　document.write(hengda.position);
　　hengda.make();

// position属性和make()方法都是一模一样的内容，每一次生成一个实例，都必须为重复的内容，多占用一些内存。这样既不环保，也缺乏效率

// 让position属性和make()方法在内存中只生成一次，然后所有实例都指向那个内存地址，这意味着，把那些不变的属性和方法，直接定义在prototype对象上。
　　function hengdaObj(name,color){
　　　　this.name=name;
　　　　this.color=color;
　　}
　　hengdaObj.prototype.position = "天津";
　　hengdaObj.prototype.make = function(){console.log("挣钱");};
// 生成实例对象
　　var hengda = new hengdaObj("恒达","蓝色");
　　var daolan = new hengdaObj("导览","绿色");
　　document.write(JSON.stringify(hengda));
　　document.write(JSON.stringify(daolan));
　　document.write('<br>hengda.position:');
　　document.write(hengda.position);
　　hengda.make();
// 这时所有实例的position属性和make()方法，其实都是同一个内存地址，指向prototype对象，因此就提高了运行效率
// prototype对象验证方法
// isPrototypeOf()

　　document.write('<br>hengda isPrototypeOf hengdaObj: ' + hengdaObj.prototype.isPrototypeOf(hengda))

// 每个实例对象都有一个hasOwnProperty()方法，用来判断某一个属性到底是本地属性，还是继承自prototype对象的属性。
　　document.write('<br>hasOwnProperty name:' + hengda.hasOwnProperty("name")); // true
　　document.write('<br>hasOwnProperty position:' + hengda.hasOwnProperty("poisition")); // false

// in运算符,来判断某个实例是否含有某个属性，不管是不是本地属性。
　　document.write('<br>name in hengda:' + ('name' in hengda)); // true
　　document.write('<br>poisition in hengda:' + ('position' in hengda)); // false

 

二、继承

　　var line = '<div>----------------------------------------------</div>';

// 现在有一个"水果"对象的构造函数。
　　function fruit(){
　　　　this.type = "水果";
　　}
// 还有一个"苹果"对象的构造函数。
　　function apple(name,color){
　　　　this.name = name;
　　　　this.color = color;
　　}
// 怎样才能使"苹果"继承"水果"呢？
// 1.构造函数绑定，最简单的方法，使用call或apply方法，将父对象的构造函数绑定在子对象上，即在子对象构造函数中加一行
　　function fruit(){
　　　　this.type = "水果";
　　}
　　function apple(name,color){
　　fruit.apply(this, arguments);
　　　　this.name = name;
　　　　this.color = color;
　　}

　　var apple1 = new apple("富士","红色");
　　document.write(JSON.stringify(apple1.type));
　　document.write(line);

// 2.prototype模式,更常见，使用prototype属性。如果"苹果"的prototype对象，指向一个水果的实例，那么所有"水果"的实例，就能继承水果了。
　　function fruit(){
　　　　this.type = "水果";
　　}
　　function apple(name,color){
　　　　this.name = name;
　　　　this.color = color;
　　}

　　apple.prototype = new fruit();
　　apple.prototype.constructor = apple;
　　var apple2 = new apple("黄元帅","黄色");
　　document.write(apple2.type);
// 任何一个prototype对象都有一个constructor属性，指向它的构造函数。加了"apple.prototype.constructor = apple;"apple.prototype.constructor是指向apple的；不加加了这一行以后，apple.prototype 是fruit

　　document.write('<br>apple constructor:' + (apple.prototype.constructor == fruit)); //true
// 更重要的是，每一个实例也有一个constructor属性，默认调用prototype对象的constructor属性。
　　document.write('<br>apple2 等于 apple constructor : ' + (apple2.constructor == apple.prototype.constructor));
　　document.write(line);

// 3. 拷贝继承，把父对象的所有属性和方法，拷贝进子对象

// 首先，还是把fruit的所有不变属性，都放到它的prototype对象上。

　　function fruit(){}

　　fruit.prototype.type = "水果";
　　function apple(name,color){
　　　　this.name = name;
　　　　this.color = color;
　　}
// 然后，再写一个函数，实现属性拷贝的目的。

　　function extend(Child, Parent) {
　　　　var p = Parent.prototype;
　　　　var c = Child.prototype;
　　　　for (var i in p) {
　　　　　　c[i] = p[i];
　　　　　　}
　　　　c.uber = p;
　　}

// 这个函数的作用，就是将父对象的prototype对象中的属性，一一拷贝给Child对象的prototype对象。

　　extend(apple, fruit);

　　var apple3 = new apple("圣诞果","大红色");
　　document.write(JSON.stringify(apple3));
　　document.write('<br>拷贝继承：' + apple3.type);

转载于:https://www.cnblogs.com/hengda-frontend/p/8256908.html