js面向对象

最新推荐文章于 2022-08-09 15:00:06 发布

山有木兮木有枝21

最新推荐文章于 2022-08-09 15:00:06 发布

阅读量134

点赞数

分类专栏： web前端 # js

本文链接：https://blog.csdn.net/weixin_39477501/article/details/104461863

版权

web前端同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

15 篇文章 0 订阅

订阅专栏

1. 基本概念

面向过程就是亲历亲为，事无巨细，面面俱到，步步紧跟，有条不紊；面向对象就是找一个对象，指挥得结果；面向对象将执行者转变成指挥者；面向对象不是面向过程得替代，而是面向过程的封装；js是一个基于对象的、多范式（多种方法、多种编程模式、多种编程习惯）的编程语言（面向过程、面向对象、函数式），js中的对象就是键值对的集合。

2. 特性

（1）抽象性：如果需要用一个对象描述一个数据，需要抽取这个对象特定条件下的核心数据。

（2）封装性：对象是将数据与功能组合到一起，即封装，js对象就是键值对（数据即属性、函数即方法）的集合。

（3）继承性：js没有明确的继承语法，一般是按照继承的理念实现对象的成员扩充实现继承，一般称为父对象、子对象、基对象、派生对象。

<script>
    // js中实现继承的方法很多，其中最简单的方法叫混入（mix）
    function mix( o1, o2 ) {
        for ( var k in o2 ) {
            o1[ k ] = o2[ k ];
        }
    }
    var o1 = { name: 'KarryWang' };
    var o2 = { age: 19 };
    mix( o1, o2 );
</script>

PS：js数据是有类型的，变量是没有类型的。

3. 其它特性

（1）对象的动态特性：在js中，一旦对象需要属性，就可以利用‘对象.属性名 = 值’的方式为其添加，只要赋值成功，对象就新增了一个属性。

（2）对象属性的访问形式：① 点语法，‘o.name’；② 关联数组：‘o[ name ]’，name为字符串，或者是字符串变量，一般用于需要给对象动态添加成员的情况。

<script type="text/javascript">
    var o = {
        name: 'Karry',
        sayHello: function() {
            console.log('你好，我是' + this.name);
        }
    };
    console.log( o.name );
    console.log( o[ 'name' ]);
    o.sayHello();
    o[ 'sayHello' ]();

    for(var k in o) {
        if(typeof o[ k ] == 'function') { // 注意这里的写法
            o[ k ]();
        } else {
            console.log( 'log: ' + o[ k ]);
        }
    }
</script>

4. 使用面向对象编程

（1）使用现有对象编程

（2）自定义对象编程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>

</body>
<script type="text/javascript">
    // 面向过程
    var div = document.createElement( 'div' );
    document.body.appendChild( div );
    div.style.border = '1px dashed red';
    div.style.width = '400px';
    div.style.height = '100px';


    // 面向对象  div的构造函数
    function DivTag() {
        this.DOM = document.createElement( 'div' );
        this._加到 = function ( node ) {
            // 需要将this.DOM加到node中
            node.appendChild( this.DOM );
        };
        this._设置样式 = function ( name, value ) {
            // 设置this.DOM的样式
            this.DOM.style[ name ] = value;
        };
        this.css = function ( option ) {
            for ( var k in option ) {
                this.DOM.style[ k ] = option[ k ];
            }
        }
    }

    var divTag = new DivTag();  // 内部应该创建dom对象div，同时将其设置为属性
    divTag._加到( document.body );
    // divTag._设置样式( 'border', '1px solid red' );
    // divTag._设置样式( 'width', '400px' );
    // divTag._设置样式( 'height', '100px' );
    // divTag._设置样式( 'background', 'pink' );
    divTag.css({
        'border': '1px dotted blue',
        'width': '200px',
        'height': '200px',
        'backgroundColor': 'pink'
    });


    function DivTag1() {
        this.DOM = document.createElement( 'div' );
        this.appendTo = function ( node ) {
            node.appendChild( this.DOM );
            return this;
        };
        this.css = function ( option ) {
            for ( var k in option ) {
                this.DOM.style[ k ] = option[ k ];
            }
            return this;
        }
    }
    new DivTag1().appendTo( document.body ).css({
        'border': '1px dotted blue',
        'width': '200px',
        'height': '100px',
        'backgroundColor': 'purple'
    });
    new DivTag1().css({
        'border': '1px dotted blue',
        'width': '100px',
        'height': '100px',
        'backgroundColor': 'orange'
    }).appendTo( document.body );
</script>	
</html>

5. 构造函数

（1）构造函数是用来初始化数据的，在js给对象添加属性时用的，初始化属性值用的，构造函数在调用的一开始，new创建对象，然后有一个赋值操作，即 this = 刚刚创建出来的对象。

<script>
    function Person() {
        this.name = 'Karry';
        this.age = 18;
    }
    var p = new Person();
    // 运算符new创建了一个对象，类似于'{}'，是一个‘没有任何成员’地对象。
    // 使用new创建对象，对象的类型就是创建它的构造函数名，使用{}创建的是Object类型，相当于'new Object'
</script>