JavaScript面向对象高级

最新推荐文章于 2017-03-26 19:19:16 发布

可芭乐

最新推荐文章于 2017-03-26 19:19:16 发布

阅读量271

点赞数

分类专栏： JavaScript基础文章标签： javascript 面向对象

本文链接：https://blog.csdn.net/a839371666/article/details/54984209

版权

JavaScript基础专栏收录该内容

37 篇文章 0 订阅

订阅专栏

json方式的面向对象

把方法包在一个json里
有人管他叫——命名空间
在公司里，把同一类方法，包在一起

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<script type="text/javascript">
    var json = {
        name:'blue',
        qq:'2324235',
        showName: function (){
            alert('我的名字叫：'+this.name);
        },
        showQQ: function(){
            alert('我的qq号是：'+this.qq);
        }
    }

    json.showName();
    json.showQQ();
</script>
</head>
<body>

</body>
</html>

不适合多个对象，只有一个对象

拖拽和继承

面向对象的拖拽
改写原有拖拽
对象的继承
什么是继承
在原有类的基础上，略作修改，得到一个新的类
不影响原有类的功能
instanceof运算符
查看对象是否是某个类的实例

使用继承

限制范围的拖拽类
构造函数伪装
属性的继承
原理：欺骗构造函数
call的使用
call可以改变函数中的this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<script type="text/javascript">
    function A(){
        this.abc = 12;
    }
    A.prototype.show = function (){
        alert(this.abc);
    }

    //继承A
    function B(){
        A.call(this);
    }

    /*var obj = new B();
    alert(obj.abc);//弹出结果为12*/

    //B.prototype = A.prototype;
    for (var i in A.prototype) {
        B.prototype[i] = A.prototype[i];
    };

    B.prototype.fn = function (){
        alert('abc');
    }
    var obj = new B();
    obj.fn();//弹出结果为12
    var objA = new A();

</script>
</head>
<body>

</body>
</html>

原型链
方法的继承
原理：复制方法
覆盖原型和方法复制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
    #div1 {
        width: 200px;
        height: 200px;
        background: yellow;
        position: absolute;
    }
    #div2 {
        width: 200px;
        height: 200px;
        background: blue;
        position: absolute;
    }
</style>
<script type="text/javascript" src="Drag.js"></script>
<script type="text/javascript" src="Drag1.js"></script>
<script type="text/javascript">
    window.onload = function(){
        new Drag('div1');
        new LimitDrag('div2');
    }
</script>
</head>
<body>
    <div id="div1">普通</div>
    <div id="div2">限制</div>
</body>
</html>

系统对象

本地对象（非静态对象）
什么是本地对象
常用对象
Object、Function、Array、String、Boolean、Number、Data、RegExp、Error
内置对象（静态对象）
什么是本地对象
Global、Math
宿主对象（由浏览器提供的对象）
DOM、BOM