03_JS面向对象

知识点

• 面向对象的三大特性
• 封装
• 继承
• 多态
• 创建对象的几种方式
• 字面量形式
• 使用内置构造函数
• 封装简单的工厂函数
• 自定义构造函数
• 构造函数
• 什么是构造函数?
• 对象的创建过程
• 构造函数的返回值
• 对象是无序的键值对儿的集合
• 如果像使用正常的函数一样使用构造函数
• 获取对象类型

面向对象的三大特性

封装

对象是将数据与功能组合到一起, 即封装

• js 对象就是 键值对的集合
• 键值如果是数据( 基本数据, 复合数据, 空数据 ), 就称为属性
• 如果键值是函数, 那么就称为方法
• 对象就是将属性与方法封装起来
• 方法是将过程封装起来

　　//封装
        var name = "张学友";
        var age = 18;

        function sayHello(){
            console.log("hello world");
        }
        var obj = {
            name : "刘德华",
            age : 50,
            sayHello : function () {
                //.....
            }
        }
        var itcast = {
            getEle:{

            },
        }

继承

所谓继承就是自己没有, 别人有,拿过来为自己所用, 并成为自己的东西
让某个类型的对象获得另一个类型的对象的属性的方法

• js 继承基于对象
• 在JavaScript中，继承就是当前对象可以使用其他对象的方法和属性。
• js继承实现举例：混入（mix）

function mix ( o1, o2 ) {
    for ( var k in o2 ) {
        o1[ k ] = o2[ k ];
    }
}

多态

• 把不同的子类对象都当作父类来看，可以屏蔽不同子类对象之间的差异，写出通用的代码，做出通用的编程，以适应需求的不断变化。
• 多态是在强类型语言中比较常用，JavaScript中没有相应的体现
• 使用父类的引用（指针）指向子类的对象 就叫做多态
• 使用多态来隐藏不同

动物 animal = new 子类(); // 子类：麻雀、狗、猫、猪、狐狸...
动物 animal = new 狗();
animal.叫();

创建对象的方式

• 字面量形式
  只能创建一次对象，复用性较差，如果要创建多个对象，代码冗余度太高

　　var obj = {
            name:"演员",
            singer:"薛段子手",
            type:"流行"
        };
        var obj1 ={
            name:"吻别",
            singer:"张学友",
            type:"流行"
        }

• 使用内置构造函数

    //使用内置构造函数
    var obj = new Object();
    obj.name = "一千个伤心的牛油";
    obj.singer = "张学友";
    obj.sing = function () {
        console.log("一千个伤心的牛油");
    }

    var obj2 = new Object();
    obj2.name = "一千个伤心的牧流";
    obj2.singer = "张学友";
    obj2.sing = function () {
        console.log("一千个伤心的牧流");
    }

• 封装简单的工厂函数
  本质还是内置构造函数，已经不推荐使用了

 function createSong(SingerName,SingName){
        var obj = new Object();
        obj.name = SingerName;
        obj.singer = SingName;
        obj.sing = function () {
            console.log("一千个伤心的牛油");
        }
        return obj;
    }
    var obj = createSong("一千个伤心的牛油","张学友");

自定义构造函数

• 什么是构造函数?
• 构造函数其实也是函数，但是通常用来初始化对象，并且和new关键字同时出现
• new 是用来创建对象的，构造函数是用来初始化对象的(给对象新增成员)
• 构造函数名，首字母要大写！以示区分

• 对象的创建过程

function Person(name, age){
    this.name = name;
    this.age = age;
}
var p = new Person();

以上面这个p对象创建为例：

• 首先使用new关键字创建对象，类似于使用{},这个时候创建出来的对象是一个"没有任何成员"的对象。这里需要注意两点：
  1， 使用new关键字创建的对象，对象的类型就是创建这个对象使用的构造函数的函数名
  2， 使用{}创建对象，对象的类型一定是Object，相当于使用了new Object()

• 使用构造函数为其初始化成员
  1， 在构造函数调用开始的时候，有一个赋值操作，也就是让this = 刚创建出来的对象
  2， 在构造函数中，this就代表刚创建出来的对象

• 在构造函数中，利用对象的动态特性，为对象添加成员

• 构造函数的执行过程

1. 使用new关键字创建对象
2. 调用构造函数，把新创建出来的对象赋值给构造函数内的this
3. 在构造函数内使用this为新创建出来的对象新增成员
4. 默认返回新创建的这个对象 （普通的函数，如果不写返回语句，会返回undefined）

• 构造函数的返回值

1. 如果不写返回值，默认返回的是新创建出来的对象 （一般都不会去写这个return语句）
2. 如果我们自己写return语句 return的是空值（return;），或者是基本类型的值或者null，都会默认返回新创建出来的对象
3. 如果返回的是object类型的值，将不会返回刚才新创建的对象，取而代之的是return后面的值

• 对象是无序的键值对儿的集合

    function Animal(name, type, barkWay) {
        this.name = name;
        this.type = type;
        this.bark = barkWay;
    }

• 如果像使用正常的函数一样使用构造函数
• 构造函数中的this将不再指向新创建出来的对象（因为根本就没有创建对象）
• 构造函数中的this这个时候指向的就是window全局对象
• 当使用this给对象添加成员的时候，全部都添加到了window上

            Animal("","",function () {
                console.log("我是函数");
            }); //这是一个错误的演示

            window.bark();

• 获取对象类型
• typeof 对象实例，获取的是object

            var dog = new Animal("大黄","BYD",function () {
                console.log("汪汪汪");
            });
            console.log(dog);
            var cat = new Animal("小花","BSM",function () {
                console.log("喵喵喵");
            });
            console.log(typeof cat);//object

• js中提供了两个方法来调用其他对象的方法：call、apply
• 获取具体类型的方式

            var typeStr = Object.prototype.toString.call(想获取类型的对象)
            typeStr = typeStr.slice(8, -1);