面向对象.一

面向对象.一

一、面向对象的三大特性

封装、继承、多态

• 封装 : 复用|信息隐蔽|把变量和函数封装在对象内部
• 继承 : 获取已经存在的对象已有属性和方法的一种方式(获取他人已有财富和资源的一种方式)
• 多态 : ① 同一操作,作用于不同的对象,会产生不同的解释和行 ② 隐藏不同

二、字面量创建对象

• 写法示例

var  book1 = {
        name:"声名狼藉者的生活",
        price:42.00,
        author:"福柯",
        press:"北京大学出版社",
        read:function () {
            console.log("我的书名为:声名狼藉者的的生活,作者为福柯....");
        }
    };

存在的问题

[01] 代码复用性差

[02] 如果要创建大量的同类型对象，则需要些大量重复性代码

三、内置构造函数创建对象

JS中的内置构造函数

String
Number
Boolean
    注意：(区别于string number boolean)
Date
Array
Function
Object
RegExp

基本写法

    var book1 = new Object();
    book1.name = "声名狼藉者的生活";
    book1.price = 42.00;
    book1.author = "福柯";
    book1.press = "北京大学出版社";
    book1.read = function () {
        console.log("我的书名为:声名狼藉者的的生活,作者为福柯....");
    };

问题

1 创建的对象无法复用,复用性差

2 如果需要创建多个同类型的对象,如(书籍)则需要写大量重复的代码,代码的冗余度高

四、工厂函数创建对象

基本写法

   
      function createBookNew (name,price,author,press) {

        var book = new Object();
        book.name = name;
        book.price = price;
        book.author = author;
        book.press = press;
        book.read = function () {
            console.log("我的书名为:"+book.name+",作者为"+book.author+"....");
        };

        return book;
    }

    //使用工厂函数来创建对象
    var book1 = createBookNew("声名狼藉者的的生活","42.00","福柯","北京大学出版社");
    var book2 = createBookNew("人性的枷锁","49.00","毛姆","华东师范大学出版社");
    var book3 = createBookNew("悟空传","28.00","今何在","湖南文艺出版社");

    //打印对象的属性,调用对象的方法
    console.log(book1.name);
    console.log(book2.name);
    console.log(book3.name);

    book1.read();
    book2.read();
    book3.read();

工厂函数说明

工厂函数方式创建对象其本质是对内置构造函数创建对象的过程进行了封装

适用于大规模“批量生产”同类型的对象

    function createBook (name,price,author,press) {
        //001 参数 = 原料
        var book = new Object();

        //002 创建对象并设置对象的属性和方法 = 对原料进行加工
        book.name = name;
        book.price = price;
        book.author = author;
        book.press = press;
        book.read = function () {
            console.log("我的书名为:"+book.name+",作者为"+book.author+"....");
        };

        //003 把处理好的对象返回给我们 == 产品出厂
        return book;
    }

封装思路

使用函数把固定不变的部分封装起来，变化的部分提取为函数的参数

工厂函数创建对象的实现过程

① 提供一个创建对象的函数（参数）

② 在该函数内部使用new 关键字和Object构造器创建对象

③ 设置对象的属性

④ 设置对象的方法

⑤ 返回对象

五、自定义构造函数创建对象

基本写法

   
    function 构造函数名(参数1,参数2,参数3...) {
        //设置对象的属性
        this.属性01 = 参数1;
        this.属性02 = 参数2;

        //设置对象的方法
        this.方法01 = function () {
            //.....
        };
        this.方法02 = function () {
            //.....
        }
    }

    //自定义构造函数方式创建对象
    var 对象01 = new 构造函数名(实参01,实参02,实参03...);
    var 对象02 = new 构造函数名(实参01,实参02,实参03...);

代码示例

      
     function CreateBook (name,price,author,press) {
        this.name = name;
        this.price = price;
        this.author = author;
        this.press = press;
        this.read = function () {
            console.log("我的书名为:"+this.name+",作者为"+this.author+"....");
        };
    }

    var b1 = new CreateBook("声名狼藉者的的生活","42.00","福柯","北京大学出版社");
    var b2 = new CreateBook("人性的枷锁","49.00","毛姆","华东师范大学出版社");
    var b3 = new CreateBook("悟空传","28.00","今何在","湖南文艺出版社");

    //打印对象的属性,并调用对象的方法测试
    console.log(b1.author);
    console.log(b2.author);
    console.log(b3.author);
    b1.read();
    b2.read();
    b3.read();

构造函数与new关键字

构造函数和普通函数的区别 ： 函数的首字母大写

构造函数的作用 : 用于完成对象的初始化

new关键字的作用 ：用于创建对象（Object类型）

自定义构造函数和简单工厂函数的对比

① 函数的首字母大写(用于区别构造函数和普通函数)
② 创建对象的过程是由new关键字实现
③ 在构造函数内部会自动的创建新对象,并赋值给this指针
④ 自动返回创建出来的对象

构造函数的执行过程

① 使用new关键字创建对象

② 把新创建出来的对象赋值给this

③ 在构造函数内部,使用this为新创建出来的对象设置属性和方法

④ 默认返回新创建的对象(普通函数如果不显示的return则默认返回undefined)。

构造函数的返回值

01 如果在构造函数中没有显示的return,则默认返回的是新创建出来的对象

02 如果在构造函数中显示的return,则依照具体的情况处理

[01] return 的是对象,则直接返回该对象,取而代之本该默认返回的新对象
[02] return 的是null或基本数据类型值,则返回新创建的对象

构造函数方式创建对象存在的问题

每次创建对象,都会重新创建函数，那么如果创建的对象数量很多,而对象方法内部的实现一模一样,则造成了资源浪费

六、构造函数的使用注意

函数传值

函数传值：可以把构造函数的对象方法抽取为参数

代码示例

    //001 创建一个构造函数
    function Person(name,age,toDoSomeThing) {

        //002 在构造函数内部设置对象的属性和方法
        this.name = name;
        this.age = age;

        this.sayName = function () {
            console.log(this.name);
        };

        this.toDoSomeThing = toDoSomeThing;
    }

    //003 使用构造函数创建对象
    var zhangsan = new Person("张三",18,function () {
        console.log("张三在读书");
    });

    var lisi = new Person("李四",20,function () {
        console.log("李四在玩耍");
    });

对象类型

检查对象的类型：instanceOf

获取对象的类型：Object.prototype.toString.call(dog)

对象的构造器属性

function Dog(name) {
        this.name = name;
        this.color = "黄色";
    }
console.log(dog.constructor);

属性的名称：constructor

构造器属性:constructor ->指向与之对应的构造函数

通过对象.constructor访问的是原型对象的constructor属性

属性的作用：指向创建该对象的构造函数，类似于现实生活中所有的产品都标有生产厂家一样`

构造函数的调用

01 构造函数可以像普通函数一样不通过new关键字直接调用

02 在使用构造函数创建对象的时候，如果没有传递参数，则（）可以省略

代码示例

    //01 创建构造函数
    function Person() {
        this.name = "张三";
        this.age = 20;
        this.sayName = function () {
            console.log(this.name);
        }
    }

    //02 使用构造函数创建对象
    var p1 = new Person();
    var p2 = new Person;    //说明:如果不需要传递参数,则在调用构造函数的时候()可以省略

this

01 如果使用new 构造函数的方式调用，则this指向内部默认创建出来的空对象

02 如果像调用普通函数一样调用构造函数，则this指向全局对象window(不要这样使用)