review javascript 24:面向对象

(1)知识点

  • (1.1)定义
  • (1.2)创建对象
  • (1.3)原型与原型链
  • (1.4)特点

(2)细化

(2.1)定义

对象:程序中描述一个现实中具体事物的属性和方法的结构
比如汽车是一个对象,车的品牌,颜色就是属性;启动,停止,加速,双闪,刹车都是车子的方法
面向对象:面向对象编程中,描述一个具体事物都需要用对象来封装对象的属性和方法
比如:rest软件架构中,都是按照对象的模块进行划分,比如人员管理,资源管理
/user/id1234

写任何程序,都要先找对象,再识别对象的属性和功能

(2.2)创建对象

(a)json对象

var obj = {"属性名":"值","属性名":"值",...};

(b)定义一个空的对象:

var obj = new Object();
var obj =  {};

(c)定义function
定义一个构造函数:

  function 类型名(属性参数列表) {
        this.属性名 = 参数值;
        this.属性名 = 参数值;
        this.方法名 = function () {
            ......
        }
    }

用new调用构造函数,装饰一个新创建的对象:

var obj = new 类型名(属性值,... ...);

(2.3)原型与原型链

link://www.greatytc.com/p/1526fcdc4466

(2.4)特点

面向对象三大特点:【封装】、【继承】、【多态】;
多态又包括重写和重载;

封装

将描述一个事物的属性和方法集中定义在一个对象中。
原因:
1.单独的属性和方法是没有意义的,只有放在对象上才有意义;
2.便于反复调用——代码重用!便于维护!参考下面的例子Car();

继承

inherit父对象中的属性和方法,子对象可直接使用!
原因:代码重用;便于维护;节约内存空间。
Tips:js中的继承都是用 __proto__

那如何修改继承呢?参考资料,总结四种修改继承的方法:

  1. 仅修改一个对象的父对象:
子对象.__proto__ = 父对象;
Object.setPrototypeOf(子对象,父对象);
  1. 替换构造函数的原型对象(prototype)为新父对象
    结果:将来再创建的子对象,所有新创建的子对象都继承新父对象
    时机:在刚刚定义完构造函数后,立刻修改!在修改原prototype对象和创建新子对象之前
    步骤:
    (a)构造函数.prototype = 新父对象
    (b)构造函数.prototype.constructor = 构造函数对象

  2. 用一个已有的父对象作为参照,创建一个新子对象,同时,扩展子对象自有属性。
    在创建一个子对象时,希望随意扩展子对象的自有属性时,使用该继承方法。

var son = Object.create(父对象);

两件事:
a. 创建空对象son
b. 设置son的__proto__指向父对象

  var son = Object.create(父对象, {
        扩展属性名1: {
            writable: true,
            value: 属性值,
            configurable: true
        },
        扩展属性名2: {
            ...
       }
    });

(上面的1,2,3方式的实例可以参见例2)

  1. 推荐的继承方式:既继承结构,又继承原型
    何时使用:两种类型间的继承
    使用:
    a. 子类型构造函数开始位置,借用父类型构造函数:
父类型构造函数.call(this,参数列表)
父类型构造函数.apply(this,[参数列表])

Tips:仅完成第一步,只是借用构造函数中的语句而已,没有实现任何对象间的继承
b. 定义构造函数后,设置子类型构造函数的prototype继承父类型的prototype:

Object.setPrototypeOf(子类型.prototype,父类型.prototype)

(4方式的实例可以参见例3)


(3)实践

例1:

<script type="text/javascript">
    init();
    function init() {
        var obj = {name: 'panhf', age: 28};
        // hash数组,传入的key必须是字符串
        console.log(obj["name"]);
        console.log(obj["age"]);

        // in
        for (var key in obj) {
            console.log(key + ":" + obj[key]);
        }


        var obj1 = new Object();
        obj1.name = "zjl";
        obj1["age"] = 4;
        // 将对象转换成字符串
        console.log(JSON.stringify(obj1));

        var car = new Car("white", "buick");
        var car2 = new Car("black", "benz");

        console.log(JSON.stringify(car));
        car.launch();
        car.stop();
        // 原型的使用
        Car.prototype.info = function () {
            console.log(JSON.stringify(this));
        };

        console.log("=====");
        car.info();
        car2.info();

        console.log("=====");
        /**
         *
         * 使用jquery加载json文件
         */
        var dataroot = "../json/test.json";
        var carArr = new Array();
        /**
         * 异步执行
         * http://www.cnblogs.com/chenxizhang/archive/2009/07/02/1515151.html
         *
         */
        $.getJSON(dataroot, {}, function (data) {
            //console.log(data);
            for (var i = 0; i < data.length; i++) {
                var car = new Car(data[i].color, data[i]["brand"]);
                carArr.push(car);
            }

            //console.log(JSON.stringify(carArr));
        });

        console.log("=====");
        console.log(new Person("phf"));
        console.log(new Person("phf", 28));

    }

    function Person() {
        /**
         * 参数列表封装在arguments内置对象数组中
         */
        console.log(JSON.stringify(arguments));
    }

    function Car(color, brand) {

        this.color = color;
        this.brand = brand;

        this.launch = function () {
            console.log("car is launch");
        };

        this.stop = function () {
            console.log("car is stop");
        }
    }

    function Car(color, brand, createDate) {
        this.color = color;
        this.brand = brand;
        this.createDate = createDate;

        this.launch = function () {
            console.log("car is launch");
        };

        this.stop = function () {
            console.log("car is stop");
        }
    }
</script>

例2:

<script type="text/javascript">
    /**
     * 修改继承的方法
     * (1)仅修改一个对象的父对象
     * (2)替换构造函数的原型对象(prototype),为新父对象
     * (3)用一个已有的父对象作为参照,创建一个新子对象,同时,扩展子对象自有属性
     */
    var father = {balance: 100, car: "=B="};
    var son = Object.create(father, {//修改继承方法三,用一个已有的父对象作为参照,创建一个新子对象,同时,扩展子对象自有属性
        favorite: {value: "坑爹"/*,writable:true*/}
    });
    console.log(son.balance);//100
    console.log(son.favorite);//坑爹
    console.log(son.hasOwnProperty("favorite"));//true//自由属性
    son.favorite = "飙车";
    console.log(son.favorite);//坑爹

    function Student(sname, sage) {//this-->刚创建的空对象
        this.sname = sname;
        this.sage = sage;
    }//prototype-->Student.prototype
    Student.prototype = father;             //(1)修改继承方法二
    Student.prototype.constructor = Student;//(2)修改继承方法二
    //prototype-->father
    //凡是子对象共有的属性值和方法,都要放在构造函数的原型中
    Student.prototype.intrSelf = function () {
        console.log("I'm " + this.sname + ",I'm " + this.sage);
    }//prototype.intrSelf
     //father.intrSelf

    var lilei = new Student("Li Lei", 18);
    var hmm = new Student("Han Meimei", 19);


    /*仅修改一个子对象的父对象*/
    //hmm.__proto__=father;             //(1)修改继承方法一
    //Object.setPrototypeOf(hmm,father);//(2)修改继承方法一
    console.log(hmm.balance); //100
    console.log(lilei.balance);//100
    lilei.intrSelf();//I'm Li Lei,I'm 18
    hmm.intrSelf();//I'm Han Meimei,I'm 19
</script>

例3:

<script type="text/javascript">
    /**
     * 修改继承的方法
     * 用于两种类型间的继承
     */
    //定义所有飞行物类型的构造函数
    function Flyer(fname, speed) {
        this.fname = fname;
        this.speed = speed;
    }

    Flyer.prototype.fly = function () {//所有飞行物都能飞行
        console.log(this.fname + " 以 " + this.speed + " 时速飞行");
    };

    var bird = new Flyer("小麻雀", 60);
    bird.fly();//小麻雀 以 60 时速飞行

    /*定义飞机类型的构造函数:名称,速度,载客数*/
    function Plane(fname, speed, capacity) {
        Flyer.call(this, fname, speed);//——借用构造函数
//        this.fname = fname;
//        this.speed = speed;
        this.capacity = capacity;
    }

    //Plane.prototype 继承 Flyer.prototype
    Object.setPrototypeOf(Plane.prototype, Flyer.prototype);

    var A380 = new Plane("A380", 1000, 555);
    A380.fly();

    Plane.prototype.fly = function () {
        console.log(this.fname + " 搭载 " +
            this.capacity + " 名乘客以 " +
            this.speed + " 时速飞行");
    }

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

推荐阅读更多精彩内容

  • 博客内容:什么是面向对象为什么要面向对象面向对象编程的特性和原则理解对象属性创建对象继承 什么是面向对象 面向对象...
    _Dot912阅读 1,405评论 3 12
  • 0 写在前面的话 大多数的面向对象编程语言中,比如C++和Java,在使用他们完成任务之前,必须创建类(class...
    自度君阅读 991评论 0 3
  • 本章内容 理解对象属性 理解并创建对象 理解继承 面向对象语言有一个标志,那就是它们都有类的概念,而通过类可以创建...
    闷油瓶小张阅读 846评论 0 1
  • 每一年春天到来的时候,看着充满着希望的绿色一点点的充满整个城市,也就到了我的难过的时候。你猜对了,我花粉过敏。每一...
    悟_28d4阅读 169评论 0 0
  • 学习篇 1.大一的学习特别重要。第一学期往往能够决定你大学生涯整个的走向。- 2.大二可以辅修,前提是有基点的要求...
    16aa5fab5f62阅读 585评论 1 6