javascript基础学习一--面向对象

面向对象简介

面向过程就是亲力亲为，事无巨细，步步紧跟，不能跳过（做饭过程）

面向对象：找一个对象，指挥得结果。（叫外卖，不关注怎么做饭，求结果）

函数也是对象，指函数封装性。（用来不告诉你核心怎么实现，但可以给你用）

面向对象实质上是对面向过程的封装，但不是对面向过程的替代

在jq中

$(‘ #dv’) //找id=dv的对象

$( ‘ <div>div>’).appendTo(body)//封装div对象到body中

$(body).append(‘<div>div>’)跟2相同

 

什么叫面向对象开发？使用对象开发

js面向对象特性（*）抽象、封装、继承

js中的对象：键值对的集合

描述人物：name，age，gender      {name: ‘zs’, age:18, gender : 1}

 

抽象：

如果需要用一个对象描述一个数据，需要抽取这个对象的核心数据，

不在特定条件下不知道是什么

 

封装：

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

js对象就是键值对的集合

键值如果是数据（基本数据，复合数据，空数据）

如果键值是函数，那么就称为方法

对象就是将属性与方法封装起来

方法是将过程封装起来

 

继承：

简单理解就是自己没有，继承别人的拿过来。是实现复用的手段，即把别人的拿过来用。

了解：在面向对象语言中（如：java、c++）类是模版，规定了一个对象应该有什么属性方法，js则使用构造函数定义属性方法

另一个模版的成员，那么由该模版创建出来的对象就同时拥有两个模版对象

js没有明确的继承语法，一般都是按照继承的理念实现对象成员扩充实现继承

最简单的方法叫混入（mix）如下：

function mix(o1,o2) {  //在jq中将此函数命名为extend
            for (var k in o2) {
                o1[k] = o2 [k];
            }
        }
        var o1 = { name :"zhangdan"}
        var o2 = { age : 19};
        
        mix (o1, o2); //就是将o2 的成员一一加到o1中，使得o1具有两个对象的属性

   　　  //1、首先找对象
        //2、任何操作应该交给对象完成
        //面向过程代码
        //任务需求：
        //1、创建一个div标签
        var div = document.createElement('div');
        //2、将div加到页面中
        document.body.appendChild(div);
        //3、设置div的样式
        div.style.border = '1px solid red';
     
    　　//面向对象的方式去思考：
        //1、抽取对象（名词提炼法）：div，body
        //2、分析属性与方法（动词提炼）：加到，设置样式
        function DivTag() {
            this.DOM = document.createElement('div');
            this.appendTo = function (node) {
                node.appendChild( this.DOM);
            };
            this.css = function(option) {
                for (var k in option) {
                    this.DOM.style[k] = option[k];
                }
            }
        }
            var divTag = new DivTag();
            divTag.appendTo(document.body);
            divTag.css({
                'border': '10px solid red',
                'width': '400px',
                'height': '100px',
                'background-color': 'blue'
            });
中级面向对象
 //面向对象的方式去思考：
        //1、抽取对象（名词提炼法）：div，body
        //2、分析属性与方法（动词提炼）：加到，设置样式
        function DivTag() {
            this.DOM = document.createElement('div');
            this.appendTo = function (node) {
                node.appendChild( this.DOM);
                return this;//如果没有会返回undefined 不能如下使用
            };
            this.css = function(option) {
                for (var k in option) {
                    this.DOM.style[k] = option[k];
                }
                return this;;//如果没有会返回undefined 不能如下使用
            }
        }
            new DivTag().appendTo(document.body).css({
                'border': '10px solid red',
                'width': '400px',
                'height': '100px',
                'background-color': 'pink'
            });
        new DivTag().appendTo(document.body).css({
                'border': '13px solid green',
                'width': '300px',
                'height': '200px',
                'background-color': 'pink'
            });
//思考：
//1、输入的时候写的是函数的定义，为什么输出是undefined
//在js中函数是一等公民，是一个非常普通的对象
//声明一个函数没有值
//条件断点：当浏览器认为你的条件为真时，起作用

 

为什么要学面向对象

面向对象是一种思考问题的方式，帮我们封装内容方便未来调用。

对象可以屏蔽一些东西，提取对象特定的行为属性；

// 面向对象example
var hero = new Object();
// 属性-特征 名词
hero.name = "xm";
hero.level = 0;
hero.diamond = 0;
console.log(hero.name);
// 方法--行为 动词
hero.moveLeft = function () {
console.log("left");
};
hero.attack = function (name) {
// 只有在当前hero对象的方法中，this才是当前hero对象
console.log(this.name + "attack" + name); 
};
// 调用对象的方法
hero.attack("xjj");
// new Object()；
// 1、内存中开辟空间，存储创建的对象,这个对象没有属性和方法（除开系统内置）
// 2、返回刚刚创建的对象
// 3、Object构造函数第一个字母要大写
// 函数跟方法的区别
// 函数：直接调用的是函数； 方法：通过对象调用的函数是对象的方法
// 自定义构造函数-构造一个对象，并且返回的函数，注意首字母大写
function Person(name, age, sex) {
// 不需再new Object
}
// 1、开辟内存空间，存储新创建的对象new Object（）
//谁调用的this？？？重点
// 2、会把this 作为当前的对象
// 3、执行函数内部的代码，设置对象的属性和方法
// 4、返回新创建的对象

var a = new Object();
//对象：无序对象的集合，我们可以把对象当作键值对来用
//动态给对象增加属性
for (var i =0 ; i<10;i++) {
a["n" + i] = i;
}

 

Review:

1、什么是对象？

　　A、一组无序属性的集合

　　B、对象可看成键值对

　　C、属性可以包含基本值、对象和函数

2、对象的组成

　　A、属性 == 特征 名词

　　B、方法--行为  动词

　　C、将来还有事件

3、函数和方法的区别

　　A、函数：直接调用的是函数 example：alert（）

　　B、方法：通过对象调用的是方法 hero.Attack（）；

4、构造函数

　　A、构造函数的目的是用来创建对象

　　B、使用new Object（）创建对象

　　C、封装函数创建多个对象

　　D、自定义构造函数

　　　　1、内存开辟空间，存储新创建的对象new Object（）

　　　　2、会把this设置为当前对象

　　　　3、执行函数内部的代码，设置对象的属性和方法

　　　　4、返回新创建的对象

5、This

　　A、函数中this是当前调用函数的对象

　　B、构造函数中this是指当前构造函数创建的对象

　　Conclusion：谁调用this指向谁