构造函数的封装与继承
封装
就是将属性和方法封装成一个对象:构造函数模式。就是一个内部使用了this的普通函数,对构造函数使用new就能生成实例,this会绑定在对象实例上。
function Cat(name,color){
this.name=name;
this.color=color;
}
//生成实例对象
var cat1=new Cat('aa','red');
//自动含有constructor属性,指向其构造函数
cat1.constructor==Cat
//instanceof 运算符,验证原型对象与实例对象之间的关系
cat1 instanceof Cat//true
构造函数主要是为了解决生成多实例时,减少代码冗余。但是对于不变的属性和方法,都指向不同的内存地址,浪费资源。
每个构造函数都有一个prototype属性,指向另一个对象,这个对象的所有属性和方法都会被构造函数的实例继承。
function Cat(name,color){
this.name=name;
this.color=color;
}
Cat.prototype={
type:"猫科",
eat:function(){
console.log("eating");
}
}
//生成实例对象
var cat1=new Cat('aa','red');
cat1.eat()
var cat2=new Cat('bb','blue');
所有实例从prototype继承的方法指向同一个内存地址
cat2.eat==cat1.eat //true
//验证构造函数的prototype对象和实例的关系
Cat.prototype.isPrototypeOf(cat1)
//查看该属性为自身还是继承
cat1.hasOwnProperty('name')
继承
function Animal(){
this.species="动物";
}
function Cat(name,color){
this.name=name;
this.color=color;
}
如何使猫继承动物?
1、 将父对象的构造函数绑定在子对象上
function Cat(name,color){
Animal.apply(this,arguments);
this.name=name;
this.color=color;
}
var cat1=new Cat("aa","red");
cat1.species
2、 prototype模式
function Animal(){
this.species="动物";
}
Animal.prototype={
eat:function(){
console.log('eating');
}
}
function Cat(name,color){
this.name=name;
this.color=color;
}
//将prototype对象指向父类的实例
Cat.prototype=new Animal()
//为了使Cat的实例在原型链上不混乱
Cat.prototype.constructor=Cat
Cat.prototype.drink=function(){
console.log('drinking');
}
var cat1=new Cat("aa","red");
因为不变的属性都可以写入prototype中,所以可以跳过Animal(),直接继承Animal.prototype。
//将prototype对象指向父类的prototype
Cat.prototype=Animal.prototype
//为了使Cat的实例在原型链上不混乱,但是也将Animal的prototype修改为了Cat
Cat.prototype.constructor=Cat
效率更高,不用和Animal的实例建立联系,但是两个portotype指向了了同一个对象,修改会互相影响。所以利用一个空对象作为中介。
因为空对象几乎不占内存,所以利用nullObj.prototype=Parent.prototype,继承了所有的共享属性和方法,然后Child.prototype=new nullObj();
var F=function(){}
F.prototype=Animal.prototype;
Cat.prototype=new F();
Cat.prototype.constructor=Cat
封装成方法:
function extend(Child,Parent){
var F=function(){};
F.prototype=Parent.prototype;
Child.prototype=new F();
Child.prototype.constructor=Child;
}
使用:
extend(Cat,Animal);
Cat.prototype.drink=function(){
console.log('drinking');
}
var cat1=new Cat("aa","red");
cat1.eat();
cat1.drink();
非构造函数的继承
非构造函数与构造函数的区别:
- 不用new方法
- 内部不建议用this
- 可以return
构造函数有prototype方法实现继承,非构造函数就是两个普通函数,如何继承?
- 使用prototype链
var Chinese={
country:'China'
}
function object(o){
function F(){}
F.prototype=o;
return new F();
}
Doctor=object(Chinese);
Doctor.career="doctor";
Doctor.country==='China'//true
- 浅拷贝
function extendCopy(p){
var c={}
for(var i in p){
c[i]=p[i];
}
return c;
}
var Doctor=extendCopy(Chinese);
Doctor.career='doctor';
基本数据类型是参数传值,对象/数组是引用传值,所以浅拷贝有可能改变父对象内容。
- 深拷贝
function deepCopy(o,c){
var c=c||{};
for(var i in o){
//如果是引用数据类型
if (typeof o[i] ==="object") {
if (o[i] instanceof Array) {
o[i]=[]
}else{
o[i]={}
}
deepCopy(o[i],c[i]);
}else{
c[i]=o[i];
}
}
}
如何判断数据类型
基本数据类型:String Number Boolean
特殊类型: undefined null
引用类型: Object,Function,Array,Date,RegExp
typeof
基本数据类型OK,
特殊类型中 typeof undefined //undifined
引用类型中 typeof function(){} //function
其它都是 object
jquery中判断数据类型的方式:利用toString()方法。
每个对象都有一个toString()方法,当对象被表示为文本值或者当以期望字符串的形式引用对象时,该方法被自动调用。默认情况下,toString()方法被每个继承自Object的对象继承。如果此方法在自定义对象中未被覆盖,toString()返回"[object type]",其中type是对象类型。
var class2type={};
"Boolean Number String Function Array Date RegExp Object Error".split(" ").forEach(function(e,i){
class2type["[object "+e+"]"]=e.toLowerCase();
});
function _typeof(obj){
if (obj==null || undefined) {
return String(obj);
}
return typeof obj===("object"|| "function")?
//使用原型Object的toString()方法,避免在自定义对象中此方法被覆盖
class2type[Object.prototype.toString.call(obj)]:
typeof obj;
}