一、封装
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)); //truedocument.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);