js面向对象

一、对象是什么?对象的特征?
  个人理解:描述程序世界的一种方式,一种数据结构。
  • 具有唯一标志性:即使完全相同的两个对象,也并非同一个对象(引用类型);
  • 有状态:同一对象可能处于不同状态下;
  • 有行为:对象的状态可能因为它的行为产生变迁。
二、面向对象是什么?
  面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式。每个对象能够接收消息,处理数据和发送消息给其他对象。每个对象都可以被看作是一个拥有清晰角色或责任的独立小机器。目的是在编程中促进更好的灵活性和可维护性。宿主和语言的基础设施由对象来提供,程序既是一系列互相通讯的对象集合。


三、面向对象的特点
  
抽象:把核心的东西抽出来,把与我们要解决的问题有关的东西拿出来摆在面前;
   封装:不考虑内部实现,只考虑功能使用,把内部的代码保护起来,只留出一些个api接口供用户使用;
   继承:为了代码的复用,从父类上继承出一些方法和属性,子类也有自己的一些属性;
   多态:不同对象作用于同一操作产生不同的结果。

四、js中的面向对象
  
JavaScript中对象独有的特色:对象具有高度的动态性,这是因为JavaScript赋予了使用者在运行时为对象添改状态和行为的能力
  一、原型
  1. 所有的引用类型(对象、数组、函数)都有一个 _proto_ 属性,值是一个对象;
  2. 所有函数都有一个 prototype 属性,值是一个对象;
  3. 引用类型的 _proto_ 属性值指向它的构造函数的 prototype 属性值;
  二、创建对象
// 构造函数
function
Person(name, age) { this.name = name; this.age = age; } var p1 = new Person('Jack', 20);

// 字面量
var o = {}
  三、继承的几种实现方法
// 1-原型链继承
    function SuperType(name){
        this.name = name;
        this.colors = ['pink', 'blue', 'green'];
    }
    function SubType(){
        this.age = 22
    }
    SubType.prototype = new SuperType()
    SubType.prototype.constructor = SubType

    let type1 = new SubType();
    type1.colors.push('yellow');
    console.log(type1.colors);    //["pink", "blue", "green", "yellow"]

    let type2 = new SubType();
    console.log(type2.colors);    //["pink", "blue", "green", "yellow"]

  缺点:原型为另一个类型的实例,原先的实例属性变成了现在的原型属性,该原型的引用类型属性会被所有的实例共享。



// 2-构造函数继承
    function SuperType(name){
        this.name = name;
        this.colors = ['pink', 'blue', 'green'];
    }
    function SubType(name){
        SuperType.call(this, name);
    }

    let type1 = new SubType('rose');
    type1.colors.push('yellow');
    console.log(type1.colors);    //["pink", "blue", "green", "yellow"]

    let type2 = new SubType('jack');
    console.log(type2.colors);    //["pink", "blue", "green"]

  优点:解决了原型中包含引用类型值被所有实例共享的问题
  缺点:方法都在构造函数中定义,函数复用无从谈起,另外超类型原型中定义的方法对于子类型而言都是不可见的。

// 3-组合继承
    function SuperType(name){
        this.name = name;
        this.colors = ['pink', 'blue', 'green'];
    }
    function SubType(name, age){
        SuperType.call(this, name);
        this.age = age;
    }
    SubType.prototype = new SuperType()
    SubType.prototype.constructor = SubType

    let type1 = new SubType('rose', 22);
    type1.colors.push('yellow');
    console.log(type1.colors);    //["pink", "blue", "green", "yellow"]

    let type2 = new SubType('jack', 22);
    console.log(type2.colors);    //["pink", "blue", "green"]

  缺点:无论什么情况下,都会调用两次超类型构造函数:一次是在创建子类型原型的时候,另一次是在子类型构造函数内部。
  优点:每个实例都有自己的属性,可以向超类传递参数,实现了函数复用。

// 4-原型式继承 等同于只传入一个参数的Object.create()
    function object(o){
        function F(){}
        F.prototype = o
        return new F()
    }
  
  缺点:包含引用类型值的属性会被所有实例共享

// 5-寄生式继承
    function createAnother(original){
        var clone = Object.create(original)
        clone.sayHi = function(){
            console.log('hi')
        }
        return clone
    }

  缺点:不能复用函数,包含引用类型值的属性会被所有实例共享。

// 6-寄生组合式继承
    function inheritPrototype(SubType, SuperType){
        var temp = Object.create(SuperType.prototype)
        temp.constructor = SubType
        SubType.prototype = temp
    }
    function SuperType(name){
        this.name = name
        this.colors = ['pink', 'blue', 'green']
    }
    function SubType(name, age){
        SuperType.call(this, name)
        this.age = age
    }
    inheritPrototype(SubType, SuperType)

    let type1 = new SubType('rose', 22);
    type1.colors.push('yellow');
    console.log(type1.colors);    //["pink", "blue", "green", "yellow"]

    let type2 = new SubType('jack', 22);
    console.log(type2.colors);    //["pink", "blue", "green"]

  优点:只调用了一次超类构造函数,效率更高。同时能保持原型链不变。

// 7-class继承
    class SuperType{
        constructor(name){
            this.name = name
        }
        getName() {
            console.log(this.name)
        }
    }
    class SubType extends SuperType{
        constructor(name, age){
            super(name)
            this.age = age
        }
        getAge() {
            console.log(this.age)
        }
    }

    let instance = new SubType('kiko', 22)
    instance.getName()    // kiko
原文地址:https://www.cnblogs.com/kiko-2/p/10288267.html