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

面向对象简介

面向过程就是亲力亲为,事无巨细,步步紧跟,不能跳过(做饭过程)

面向对象:找一个对象,指挥得结果。(叫外卖,不关注怎么做饭,求结果)

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

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

jq

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

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

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

 

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

js面向对象特性(*)抽象、封装、继承

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

描述人物:nameagegender      {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、函数:直接调用的是函数 examplealert()

  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指向谁

 

posted @ 2019-07-16 14:43  Adom_ye  阅读(186)  评论(0编辑  收藏  举报