为了转生而点技能-JavaScript,day18(Object.create、多层继承

Object.create:
如下图的Dog02利用Object.create来获取Dog01的属性,但是不会显示出来。

        var Dog01 = {
            name: 'TOM',
            size: 'big',
            color: 'yellow'
        };
        var Dog02 = Object.create(Dog01);
        console.log(Dog02);

https://ithelp.ithome.com.tw/upload/images/20211209/20143762OKBZEQLJiJ.jpg

赋予Dog02新的属性name。

        var Dog02 = Object.create(Dog01);
        console.log(Dog02);
        Dog02.name = 'Mary';

https://ithelp.ithome.com.tw/upload/images/20211209/20143762I8TsYmJfpc.jpg



多层继承:

        function Animal(腿) {                    //创一个父层Animal的属性
            this.move = '会动';
            this.breath = '会呼吸';
            this.腿 = 腿 + '条腿';
        };                      
        Animal.prototype.run = function () {    //创一个父层Animal的method
            console.log('路上或海上');
        };

        function dog(name, color) {            //创一个子层dog的属性
            Animal.call(this, 4);              //自订子层狗的参数,运用到来自父层animal的属性。
            this.name = name;
            this.color = color;
        };

        dog.prototype.eat = function () {      //创一个次层dog的method
            console.log('乖乖吃');
        };

连接父层Animal与子层dog:
在中间利用Object.create,并利用().prototype.constructor来重建dog的constructor。

        dog.prototype = Object.create(Animal.prototype);
        dog.prototype.constructor = dog;
        function Animal(腿) {
            this.move = '会动';
            this.breath = '会呼吸';
            this.腿 = 腿 + '条腿';
        };
        Animal.prototype.run = function () {
            console.log('路上或海上');
        };

        dog.prototype = Object.create(Animal.prototype);
        dog.prototype.constructor = dog;

        function dog(name, color) {
            Animal.call(this, 4);              
            this.name = name;
            this.color = color;
        };
        dog.prototype.eat = function () {
            console.log('乖乖吃');
        };

        var dog01 = new dog('TOM', 'RED');     //利用建构子自订一只实体狗

        console.log(dog01);
        dog01.eat();
        dog01.run();

练习:创造父层animal,及2个子层动物且拥有不同的methods。

        animal.prototype.run = function (腿) {
            if (腿 > 0) {
                console.log(this.name + '是路上走');
            }
            else {
                console.log(this.name + '是海里游');
            };
        };

        fish.prototype = Object.create(animal.prototype);
        fish.prototype.constructor = fish;

        function fish(name, color, size) {
            animal.call(this, 0);
            this.name = name;
            this.color = color;
            this.size = size;
        };
        fish.prototype.eat = function () {
            console.log(this.name + ' 乖乖吃');
        };

        cat.prototype = Object.create(animal.prototype);
        cat.prototype.constructor = cat;

        function cat(name, color, size) {
            animal.call(this, 4);
            this.name = name;
            this.color = color;
            this.size = size;
        };

        cat.prototype.eat = function () {
            console.log(this.name + ' 喵喵吃');
        };
        var cat01 = new cat('kitty', 'brown', 'small');
        var fish01 = new fish('Shark', 'RED', 'big');

        console.log(cat01);
        cat01.eat();
        cat01.run(4);
        console.log(fish01);
        fish01.eat();
        fish01.run(0);

https://ithelp.ithome.com.tw/upload/images/20211209/20143762VUody06M9N.jpg


<<:  以Postgresql为主,再聊聊资料库 PostgreSQL 多笔 update 方式探讨

>>:  【前端效能优化】Lighthouse 网站效能检测工具

[DAY 09] 光头古早味手工蛋饼

光头古早味手工蛋饼 地点:台南市新营区东兴路203号 时间:6:00~11:30 如果仔细看可以发现...

[Day15] JavaScript - 同步(Synchronous) 与 非同步 (Asynchronous)

JS需要JavaScript 引擎才能执行 JavaScript 是一个直译式语言,而直译语言无法独...

PHP & MySQL 连结资料库进行增、删、改、查

久违的练习一下,这次是以制作一个会员登入、注册的介面为目标所学习的一个历程,所用技术不外乎HTML、...

AE特效烛火-Day14

六指渊参考范例:https://www.sixvfx.com/ae_combustion 今天练习烛...

Day 29 | Unity 游戏开发 - 专案管理工具

在上一篇文章中完成Unity游戏开发的最後一环,今天我们要来谈谈专案过程中所用到的工具 目录 专案发...