JS面向对象--基础知识(2)

面向对象的特性:

  • 封装
  • 继承
  • 多态

封装
作用:方便代码的维护,提高代码的复用性,更安全的访问数据的方式
注意:js中的封装多了一层意思,就是使用对象来封装变量和函数

继承
现实生活中的继承:继承遗产,一个人获得另一个人所拥有的财富或者是资源的方式。
编程语言中的继承:一个类(对象)获得另外一个类(对象)的属性和方法的一种方式。

多态

  • 多种表现形态:
    对于相同的操作,不同的对象表现出不同的行为。

  • 实现:
    js天生具备多态的特性(弱类型的语言)


创建对象的几种方式

  • 字面量法
    结构
    var 对象 = {
    属性名01:属性值,
    属性名02:属性值,
    方法01:function(){函数体}
    }
    适用场合:只需简单创建单个对象
    问题:如果需要创建多个相似的对象,那么代码中冗余度太高(重复的代码太多)
    代码:
var book1 = {
        name:"悟空传",
        author:"今何在",
        press:"湖南文艺出版社",
        price:"28.00",
        logDes:function(){
            console.log("书名:" + this.name + "作者:" + this.author);
        }
    }
  • 内置构造函数法
 var book1 = new Object();
    //01 设置属性
    book1.name = "花田半亩";
    book1.author = "田维";
    book1.price = "40.01";

    //02 设置方法
    book1.logDes = function (){
        console.log("书名:" + this.name);
    }

问题:如果需要创建多个相似的对象,那么代码中冗余度太高(重复的代码太多)

  • 工厂法
    对于内置法把固定的部分提取写成函数的函数体,把变化的部分提取,作为参数传递
function createBook(name,author){
        //01 创建空的对象
        var o = new Object();
        //02 设置属性和方法
        o.name = name;
        o.author = author;
        o.logDes = function(){
            console.log("作者是:" + this.author);
        }

        //04 返回新创建的对象
        return o;
    }

问题:如果创建多个不同类型的对象,那么我们无法分辨

function createPerson(name,age){
        var o = new Object();
        o.name = name;
        o.age = age;
        return o;
    }

    function createDog(name,age)
    {
        var o = new Object();
        o.name = name;
        o.age = age;
        return o;
    }

    //创建具体的对象
    var obj1 = createPerson("张三",88);
    var obj2 = createDog("阿黄",6);

    
    console.log(obj1.constructor);  //Object
    console.log(obj2.constructor);  //Object

最终的返回值类型都是Object类型,只看结果不能够准确的辨认obj1和obj2对应的都是谁

  • 构造法
    001 提供一个构造函数
    002 通过this指针来设置属性和方法
    003 通过new操作符创建对象
function Person(name,age){
        // 默认 创建对象
        //var o = new Object();

        //默认会赋值给this
        //this = o;

        // 01 通过this指针来设置属性和方法
        this.name = name;
        this.age = age;
        this.showName = function(){
            console.log(this.name);
        };
        this.showAge = function(){
            console.log(this.age);
        }

        //默认返回
        //return this;
    }

    //03 使用new操作符来创建对象
    var p1 = new Person("张三",20);
    var p2 = new Person("张老汉",200);
    console.log(p1);
    console.log(p2);

自定义构造函数方式创建对象内部的实现细节
01 我们在使用new关键字调用构造函数的时候,内部默认会创建一个空的对象
02 默认会把这个空的对象赋值给this
03 通过this来设置新对象的属性和方法
04 在构造函数的最后,默认会把新创建的对象返回

自定义构造函数和工厂函数对比
001 函数的名称不一样,构造函数首字母大写
002 自定义构造函数创建方式内部会自动的创建空对象并且赋值给this
003 默认会自动返回新创建的对象

返回值
01 没有显示的return ,默认会把新创建的对象返回
02 显示的执行了return语句,就得看具体的情况
001 返回的是值类型,那么直接忽略该返回,把新创建的对象返回
002 返回的是引用类型的数据,会覆盖掉新创建的对象,直接返回引用数据类型的值

function Dog(name)
        {
            this.name = name;
            //return "demo";  忽略
            return function (){console.log(name);};最终返回的值
        }

        var dog = new Dog("阿黄");
        console.log(dog);

        //function (){console.log(name) -->返回值

当然这也不是自定义构造函数的最终类型,最终类型将在下面讲解。


接下来的内容均是建立在自定义构造函数上的

instanceOf:判断当前对象是否是某个对象的实例

 function Person(){};
    function Dog(){};

 var p1 = new Person();
 var dog1 = new Dog();

 console.log(p1 instanceof Person);//true
 console.log(dog1 instanceof Dog);//true

constructor:构造器属性(获取)
console.log(p1.constructor);//function Person(){}

构造函数原型对象

  • 原型对象:在使用构造函数创建对象的时候,默认的会生成一个与之关联的对象,这个对象就是原型对象。默认情况下,该对象是一个空的对象({})

  • 原型对象的作用:使用构造函数创建的对象,能够自动拥有原型对象中所有的属性和方法

  • 如何访问原型对象
    ① 构造函数.prototype
    ② 对象.__proto__

  • 如何设置原型对象
    ① 可以像设置普通对象一样来利用对象的动态特性设置属性和方法
    ② 使用字面量的方法来设置原型对象(直接替换)

  • 约定
    正确的说法:该对象的构造函数的原型对象
    构造函数的原型
    构造函数的原型对象
    对象的原型对象
    对象的原型
    以上四种说法,她们的意思是一样的,都是该对象的构造函数的原型对象

原型对象的属性和方法的设置:
构造函数.prototype.属性

实例化
通过构造函数创建对象的过程,就叫做实例化

实例
通过构造函数创建的对象被称为该构造函数的实例。一般在说实例的时候,需要指定构造函数。也就是说,我们通常会说这个对象是XXX构造函数实例

 function Dog(){};
 Dog.prototype.des = "描写信息";
 var dog = new Dog();

原型的使用方法
利用对象的动态特性来设置原型对象

function Person(){
        this.name = "默认的名称";
    }

    //设置原型对象
    //成员= 属性|方法
    //01 增加成员
    Person.prototype.des = "我是直立行走的人";
    Person.prototype.logName = function(){
        console.log(this.name);
    };

    //02 修改成员
    Person.prototype.des = "我是直立行走的人++++";
    //console.log(Person.prototype);

    var p1 = new Person();
    console.log(p1.des);
    p1.logName();

    //03 删除成员
    //delete关键字
    //语法  delete 对象.属性
    //console.log(delete p1.des);  //不能用这种方式删除原型对象上面的属性(删除的是自己的属性)

    delete Person.prototype.des ;
    console.log(p1.des);

替换原型对象(字面量)

注意点:

  • 如果是替换了原型对象,那么在替换之前创建的对象和替换之后创建的对象她们指向的原型对象并不是同一个
  • 构造器属性:在替换之后创建的对象中,它的构造器属性指向的不是Person构造函数,而是Object的原型对象的构造器属性

建议
在设置完原型对象之后再统一的创建对象。

    function Person(){
        this.age = 40;
    }
    var p1 = new Person();
    Person.prototype.sayHi = function(){
        console.log("hi");
    };

    //设置原型对象
    Person.prototype = {
        name:"默认的名称",
        showName:function(){
            console.log(this.name);
        }
    };

    var p2 = new Person();

//    p1.sayHi();  //可以
//    p2.sayHi(); //不可以
//    console.log(p1.name);  //undefined
//    console.log(p2.name); //默认的名称
//    p1.showName();         //报错
//    p2.showName();         //默认的名称
    function Person(){
        this.age = 40;
    }
    var p1 = new Person();

    //var obj = new Object();
    Person.prototype = {
        //注意:如果替换了原型对象,那么需要在原型对象中修正构造器属性
        constructor:Person,//***
        sayHi:function (){
            console.log("hi");
        }
    };
    var p2 = new Person();
    //p2.constructor = Person;   //在p2对象上添加了一个属性(constructor)

    //var p3 = new Person();


    //构造器属性
    console.log(p1.constructor == p2.constructor);  //如果不添加***所在句则false
//    console.log(p1.constructor);    //Person
//    console.log(p2.constructor);    //Object
//    console.log(p2.constructor == p2.__proto__.constructor);
//    console.log(p2.constructor == Object.prototype.constructor);

    console.log(p2);

构造器:
属性:constructor
值:与之关联的构造函数
注意点:constructor是在原型对象身上的,我们通过对象.constructor访问得到的值其实就是原型对象中对应的值

暂时先更新到这里

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

推荐阅读更多精彩内容

  • 普通创建对象和字面量创建对象不足之处:虽然 Object 构造函数或对象字面量都可以用来创建单个对象,但这些方式有...
    believedream阅读 2,310评论 2 18
  • 博客内容:什么是面向对象为什么要面向对象面向对象编程的特性和原则理解对象属性创建对象继承 什么是面向对象 面向对象...
    _Dot912阅读 1,371评论 3 12
  • 本章内容 理解对象属性 理解并创建对象 理解继承 面向对象语言有一个标志,那就是它们都有类的概念,而通过类可以创建...
    闷油瓶小张阅读 808评论 0 1
  • ————————————————01———————————————— 忙活了半个钟头,总算点燃这堆火了。 背后却依...
    余梦人生阅读 202评论 2 0
  • 做好人,走好运!希望是这样的!
    fan的执念阅读 97评论 0 1