美文网首页
面向对象

面向对象

作者: lang_liu | 来源:发表于2018-04-23 07:41 被阅读4次

类的声明

使用构造函数声明

function Animal(name){
    this.name = name;
}

使用 class 声明类

class Animal {
    constructor(name) {
        this.name = name;
    }
}

类的实例化

使用 new 操作符来实例化一个类

const animal = new Animal('dog');

类的继承

借助构造函数实现继承

function Animal(name){
    this.name = name;
}

Animal.prototype.say = function() {
    console.log("I'm Animal");
};

function Dog() {
    Animal.call(this);
    this.eyes = 2;
}
console.log(new Dog().say()); // 报错

缺点:通过这种方式实现的继承是部分继承,只能继承构造函数中的内容,不能继承父类原型链上的属性。

借助原型链实现继承

function Animal(name){
    this.name = name;
    this.numbers = [1, 2, 3];
}

Animal.prototype.say = function() {
    console.log("I'm Animal");
};

function Dog() {
    this.eyes = 2;
}

Dog.prototype = new Animal();

缺点:如果通过 Dog 实例化两个对象,当其中一个对象对原型中的数据发生修改时,因为两个实例拥有同一个原型,所以第二个实例也会发生对应的变化。

const dog1 = new Dog();
const dog2 = new Dog();
dog1.numbers.push(4); // [1, 2, 3, 4]
console.log(dog2.numbers); // [1, 2, 3, 4]

组合方式

function Animal(name){
    this.name = name;
    this.numbers = [1, 2, 3];
}

Animal.prototype.say = function() {
    console.log("I'm Animal");
};

function Dog() {
    Animal.call(this);
    this.eyes = 2;
}

Dog.prototype = new Animal();

const dog1 = new Dog();
const dog2 = new Dog();
dog1.numbers.push(4); // [1, 2, 3, 4]
console.log(dog2.numbers); // [1, 2, 3]

缺点:父类声明了两次

组合方式优化

function Animal(name){
    this.name = name;
    this.numbers = [1, 2, 3];
}

Animal.prototype.say = function() {
    console.log("I'm Animal");
};

function Dog() {
    Animal.call(this);
    this.eyes = 2;
}

Dog.prototype = Animal.prototype;

const dog1 = new Dog();
const dog2 = new Dog();
dog1.numbers.push(4); // [1, 2, 3, 4]
console.log(dog2.numbers); // [1, 2, 3]

缺点:实例对象的 constructor 指向父类而不是指向构造函数

组合方式2

function Animal(name){
    this.name = name;
    this.numbers = [1, 2, 3];
}

Animal.prototype.say = function() {
    console.log("I'm Animal");
};

function Dog() {
    Animal.call(this);
    this.eyes = 2;
}

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

const dog1 = new Dog();
const dog2 = new Dog();
dog1.numbers.push(4); // [1, 2, 3, 4]
console.log(dog2.numbers); // [1, 2, 3]

相关文章

  • PHP全栈学习笔记8

    面向对象的基本概念,面向对象编程,oop,面向对象,面向对象的分析,面向对象的设计,面向对象的编程,什么是类。 类...

  • PHP全栈学习笔记8

    面向对象的基本概念,面向对象编程,oop,面向对象,面向对象的分析,面向对象的设计,面向对象的编程,什么是类。 类...

  • 总结.Net基础知识——献给即将入坑的同行们(一期)

    什么是面向对象 面向对象OO = 面向对象的分析OOA + 面向对象的设计OOD + 面向对象的编程OOP; 通俗...

  • 面向对象基础

    面向对象编程包括: 面向对象的分析(OOA) 面向对象的设计(OOD) 面向对象的编程实现(OOP) 面向对象思想...

  • 20-OOP类与对象

    面向对象 Object Oriented 学习面向对象:XXOO 面向对象的学习: 面向过程和面向对象的区别: 面...

  • JavaScript面向对象核心知识归纳

    面向对象 概念 面向对象就是使用对象。面向对象开发就是使用对象开发。 面向过程就是用过程的方式进行开发。面向对象是...

  • 面向对象(未完成)

    面向对象 标签(空格分隔): 面向对象 第一章:面向对象(上) 什么叫面向对象 面向过程、面向对象、两者区别 构造...

  • 面向对象:创建对象&继承

    博客内容:什么是面向对象为什么要面向对象面向对象编程的特性和原则理解对象属性创建对象继承 什么是面向对象 面向对象...

  • 面向对象

    了解什么是面向对象 首先,我们学习面向对象,要了解什么是面向对象,面向对象的重要概念:类,对象。 面向对象提出的这...

  • 面向对象的三大基本特征和五大设计原则

    1、面向对象概念 1.1、理解面向对象 面向对象是相对面向过程而言; 面向对象和面向过程都是一种思想; 面向过程:...

网友评论

      本文标题:面向对象

      本文链接:https://www.haomeiwen.com/subject/pdcklftx.html