面向对象-封装

学习内容：

-理解面向对象相关概念
-理解this
-掌握如何创建对象
-掌握原型

---

学习时间：

1、 周一至周五早上 8点—晚上9点
2、 周六上午 8 点-晚上 9 点

---

一、面向对象相关概念

Javascript是一种基于对象的语言，你遇到的所有东西几乎都是对象。但是，它又不是一种真正的面向对象编程（Object Oriented Programming）语言，因为它的语法中没有class（类）。

对象：
引用类型是一种数据结构，将数据(属性)和功能(方法)组织在一起，常被称为类【抽象】；
某个特定引用类型的实例就是一个对象 引用类型&对象–模具、实例 【具体】；
我们要把"属性"（property）和"方法"（method），封装成一个对象。
面向对象和面向过程；

二、创建对象

1.基于Object的方式创建对象

语法代码如下（示例）：

var 对象名称=new Object( );

var user = new Object();
    user.name = "张三";
    user.pwd = "123456";
    user.show=function(){
        document.write(this.name+"-"+this.pwd);
    }
    user.show();

2.对象字面量

定义：
对象定义的一种简写形式
简化创建包含大量属性的对象的过程
在为函数传递大量可选参数时，可考虑使用对象字面量

语法代码如下：

var user = {
        username : "黄晓明",
        password : "123456",
        show:function(){
            document.write(this.username+"-"+this.password+"<br/>");
        }
    }
    user.show();

在为函数传递大量可选参数时，可考虑使用对象字面量：

// 在为函数传递大量可选参数时，可考虑使用对象字面
        //如：我们想要给fn函数传递fn(a,b,c,d){}  其中参数是可选参数
        function fn(obj){
            var defObj = {
                a:'a',
                b:'b',
                c:'c',
                d:'d'
            }
			// Object.assign(被覆盖内容，覆盖内容);  
			//用来合并目标对象的，如果有相同属性会覆盖，否则就合并。

            var newobj = Object.assign(defObj,obj);
            console.log(newobj);
        }

        fn({
            a:'a111',
            b:'b111',
            c:'c111'
        })

3.练习页面展示用户信息

要求：
​-基本Object对象的方式创建person对象
​-使用“.”为对象person添加属性name、age、job和address
-​添加方法intro( )，在页面上显示对象属性name、age、job和address的值
姓名：黄晓明
年龄：32
职业：明星
地址：中国

 <script>
        var person = new Object();
        person.name = '黄晓明',
        person.age = '32',
        person.job = '明星',
        person.address = '中国'

        person.intro = function(){
            var str = '姓名：'+this.name+'<br>年龄：'+this.age+'<br>职业：'+this.job+'<br>地址：'+this.address
            document.write(str);
        }
        person.intro();
    </script>

4.共厂模式

工厂模式：

软件工程领域的一种设计模式
抽象了创建对象的过程
通过函数封装创建对象的细节，就是把创建对象的过程封装在了函数中

姓名：黄晓明
年龄：32
职业：明星
地址：中国
姓名：刘德华
年龄：60
职业：明星
地址：中国

<script>
        function creatperson(name,age,job，address){
            var person = new Object();
            person.name = name,
            person.age = age,
             person.address = address,
             person.job = job,
             person.show = function(){
                var str = '姓名：'+this.name+'<br>'+'年龄:'+this.age+'<br>'+'职业:'+this.job+'<br>'+
                '地址:'+this.address+'<hr>';
                document.write(str);
            }

            return  person;
        }

        var person1 = creat_user('黄晓明',32,'明星','中国');
        var  person2 = creat_user('刘德华',60,'明星','中国');
        person1.show();
         person2.show();

    </script>

5.工厂模式的弊端

工厂模式创建对象有何弊端：
1、看不出内在联系
Javascript还提供了一个instanceof运算符，
验证原型对象与实例对象之间的关系 console.log(person1 instanceof createperson);
通过instanceof查看user1 和creat_user的关系：

console.log(person1 instanceof creatperson);

2、不变的内容，重复的调用
不变的内容(属性、方法)重复调用浪费资源

6.构造函数

*如何解决上述工厂模式的问题，js提出了一个解决的方法——构造函数；
为了解决从原型对象生成实例的问题，Javascript提供了一个构造函数（Constructor）模式。构造函数一般以大写字母开头；
构造函数也是函数，只不过可以用来创建对象,内部使用了this变量。对构造函数使用new运算符，就能生成实例，并且this变量会绑定在实例对象上。

在构造函数中使用this,this指向当前构造函数创建的实例

代码如下：

<script>
        function Creatperson(name,age,address,job){
            this.name = name,
            this.age = age,
            this.address = address,
            this.job = job,
            this.show = function(){
                var str = '姓名：'+this.name+'<br>'+'年龄:'+this.age+'<br>'+'职业:'+this.job+'<br>'+
                '地址:'+this.address+'<hr>';
                document.write(str);
            }
        }

        var person1 = new Creatperson('黄晓明',32,'中国','明星');
        var person2 = new Creatperson('刘德华',60,'中国','明星');
       person1.show();
        person2.show();

        console.log(person1 instanceof Creatperson);

    </script>

代码运行显示如下：
姓名：黄晓明
年龄：32
地址：中国
职业：明星
姓名：刘德华
年龄：60
地址：中国
职业：明星

与工厂模式对比：

• 没有显式创建对象，创建对象使用的new 构造函数的方法
• 直接将属性和方法赋给了this对象
• 没有return

*Javascript提供了一个instanceof运算符，验证原型对象与实例对象之间的关系；
抽象的类叫原型；
具体的对象叫实例。

console.log(person1 instanceof Creatperson);

实例对象有一个constructor属性，来指向它们的构造函数。

//示例对象有一个constructor 属性，来指向他的构造函数
        console.log(person1.constructor);

7.原型prototype

通过上面的构造函数，我们解决了实例和原型之间的关联，但是，不变的内容(属性、方法)重复调用浪费资源这一问题仍然没有解决

为了解决这一问题，引入使用新的知识——原型

• 每个构造函数都有一个prototype（原型）属性
• 是一个指针，指向一个对象
• 这个对象的所有属性和方法，都会被构造函数的实例继承（共享）。
• 这意味着，我们可以把那些不变的属性和方法，直接定义在prototype对象上。
  
  通过原型改造一下代码：

 <script>
        function Creatperson(name, age, address, job) {
            this.name = name,
                this.age = age,
                this.address = address,
                this.job = job
        }
        Creatperson.prototype.show = function () {
            var str = '姓名：' + this.name + '<br>' + '年龄:' + this.age + '<br>' + '职业:' + this.job + '<br>' +
                '地址:' + this.address + '<hr>';
            document.write(str);
        }

        var person1 = new Creatperson('黄晓明', 32, '中国', '明星');
        var person2 = new Creatperson('刘德华', 60, '中国', '明星');
        
       person1.show();
       person2.show();
    </script>

8.使用原型prototype对象封装cookie

create-function.js

//1.创建cookie构造函数
function cookie() {}

//setcookie把设置cookie的方法绑定在cookie的原型对象上
cookie.prototype.setcookie = function(key, val, time) {
    var date = new Date();
    date.setDate(date.getDate() + time);
    document.cookie = key + '=' + val + ';expires=' + date;
}
//获取cookie
cookie.prototype.getcookie = function(key) {
    var arry = document.cookie.split("; ");
    for (var i = 0; i < arry.length; i++) {
        var newarry = arry[i].split("=");
        if (newarry[0] == key) {
            return newarry[1];
        }
    }
}
//删除cookie
cookie.prototype.removecookie = function(key) {
    this.setcookie(key, "", -1);
}
//删除所有的cookie
cookie.prototype.clearcookie = function() {
    var arry = document.cookies.split("; ");
    for (var i = 0; i < arry.length; i++) {
        var newarry = arry[i].split("=");
        this.setcookie(newarry[0], "", -1);
    }
}

create-function.html
验证一下：

<script src="./create-function.js"></script>
    <script>
        var cookie = new cookie();
        cookie.setcookie("username", "ldh")
        cookie.setcookie("password", "123456")
        cookie.setcookie("age", "19")
        var username = cookie.getcookie("username");
        var password = cookie.getcookie("password");
        var age = cookie.getcookie("age");
        document.write('用户名：' + username + '<br>' + '密码：' + password + '<br>' + '年龄：' + age);
        cookie.removecookie(age);
        // cookie.clearcookie();
    </script>

三、总结

总结：
以上就是今天所学习的内容，本文介绍了面向对象的概念以及创建对象的方法，重要的是学会使用原型prototype对象封装cookie。