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;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容