JS中的封装与继承

构造函数的封装与继承

封装

就是将属性和方法封装成一个对象:构造函数模式。就是一个内部使用了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方法实现继承,非构造函数就是两个普通函数,如何继承?

  1. 使用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
  1. 浅拷贝
function extendCopy(p){
    var c={}
    for(var i in p){
        c[i]=p[i];
    }
    return c;
}
var Doctor=extendCopy(Chinese);
Doctor.career='doctor';

基本数据类型是参数传值,对象/数组是引用传值,所以浅拷贝有可能改变父对象内容。

  1. 深拷贝
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;
}

你可能感兴趣的:(JS中的封装与继承)