码迷,mamicode.com
首页 > 其他好文 > 详细

原型链

时间:2019-03-30 17:27:17      阅读:162      评论:0      收藏:0      [点我收藏+]

标签:ring   pom   name   独立性   end   temp   prototype   类的构造函数   识别   

原型链

https://www.cnblogs.com/pompey/p/6675559.html
https://www.cnblogs.com/alichengyin/p/4852616.html
prototype
javascript中所有的函数都有prototype这个属性
prototype是指向原型的引用
__proto__
对象的__proto__会指向其“构造函数”的prototype(先称之为构造函数)。
constructor
一个函数的原型的constructor属性指向的是函数本身
instanceof
instanceof是通过对象的prototype链来确定这个对象是否是某个类的实例,而不关心对象与类的自身结构。

js中创建对象的各种方法,现在最常用的方法是组合模式
1)原始模式
对象字面量方式
var person = {
name: ‘Jack’,
age: 18,
sayName: function () { alert(this.name); }
};
Object构造函数方式
var person = new Object();
person.name = ‘Jack’;
person.age = 18;
person.sayName = function () {
alert(this.name);
};
显然,当我们要创建批量的person1、person2……时,每次都要敲很多代码,资深copypaster都吃不消!然后就有了批量生产的工厂模式。
2)工厂模式
//2.工厂模式,定义一个函数创建对象
function creatPerson (name, age) {
var person = new Object();
person.name = name;
person.age = age;
person.sayName = function () {
alert(this.name);
};
return person;
}
工厂模式就是批量化生产,简单调用就可以进入造人模式(啪啪啪……)。指定姓名年龄就可以造一堆小宝宝啦,解放双手。但是由于是工厂暗箱操作的,所以你不能识别这个对象到底是什么类型、是人还是狗傻傻分不清(instanceof 测试为 Object),另外每次造人时都要创建一个独立的temp对象,代码臃肿,雅蠛蝶啊。
3)构造函数
//3.构造函数模式,为对象定义一个构造函数
function Person (name, age) {
this.name = name;
this.age = age;
this.sayName = function () {
alert(this.name);
};
}
var p1 = new Person(‘Jack’, 18); //创建一个p1对象
Person(‘Jack’, 18); //属性方法都给window对象,window.name=’Jack’,window.sayName()会输出Jack
构造函数与C++、JAVA中类的构造函数类似,易于理解,另外Person可以作为类型识别(instanceof 测试为 Person 、Object)。但是所有实例依然是独立的,不同实例的方法其实是不同的函数。这里把函数两个字忘了吧,把sayName当做一个对象就好理解了,就是说张三的 sayName 和李四的 sayName是不同的存在,但显然我们期望的是共用一个 sayName 以节省内存。
4)原型模式
//4.原型模式,直接定义prototype属性
function Person () {}
Person.prototype.name = ‘Jack’;
Person.prototype.age = 18;
Person.prototype.sayName = function () { alert(this.name); };
//4.原型模式,字面量定义方式
function Person () {}
Person.prototype = {
name: ‘Jack’,
age: 18,
sayName: function () { alert(this.name); }
};
var p1 = new Person(); //name=’Jack’
var p2 = new Person(); //name=’Jack’
这里需要注意的是原型属性和方法的共享,即所有实例中都只是引用原型中的属性方法,任何一个地方产生的改动会引起其他实例的变化。
5)混合模式(构造+原型)
//5. 原型构造组合模式,
function Person (name, age) {
this.name = name;
this.age = age;
}
Person.prototype = {
hobby: [‘running’,’football’];
sayName: function () { alert(this.name); },
sayAge: function () { alert(this.age); }
};
var p1 = new Person(‘Jack’, 20);
//p1:’Jack’,20; proto: [‘running’,’football’],sayName,sayAge
var p2 = new Person(‘Mark’, 18);
//p1:’Mark’,18;proto: [‘running’,’football’],sayName,sayAge
做法是将需要独立的属性方法放入构造函数中,而可以共享的部分则放入原型中,这样做可以最大限度节省内存而又保留对象实例的独立性。


扩展Object类,添加Clone和Extend方法
/*扩展Object类,添加Clone,JS实现克隆的方法*/
Object.prototype.Clone = function(){
var objClone;
if (this.constructor == Object){
objClone = new this.constructor();
}else{
objClone = new this.constructor(this.valueOf());
}
for(var key in this){
if ( objClone[key] != this[key] ){
if ( typeof(this[key]) == ‘object‘ ){
objClone[key] = this[key].Clone();
}else{
objClone[key] = this[key];
}
}
}
objClone.toString = this.toString;
objClone.valueOf = this.valueOf;
return objClone;
}
/*扩展Object类,添加Extend方法来实现JS继承, 目标对象将拥有源对象的所有属性和方法*/
Object.prototype.Extend = function (objDestination, objSource) {
for (var key in objSource) {
if (objSource.hasOwnProperty(key) && objDestination[key] === undefined) {
objDestination[key] = objSource[key];
}
}
return objDestination;
}

原型链

标签:ring   pom   name   独立性   end   temp   prototype   类的构造函数   识别   

原文地址:https://www.cnblogs.com/leftJS/p/10628067.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!