JS——面向对象、继承

创建对象的方式：

1）单体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>面向对象——单体</title>
    <script type="text/javascript">

        var Tom = {

            name: 'tom',
            age:18,

            showname:function(){
                alert(this.name);
            },

            showage:function(){
                alert(this.age);
            }
        };

        alert(Tom.age);
        Tom.showname();

    </script>
</head>
<body>
</body>
</html>

2）工厂模式：通过一个函数来创建对象（开料、装配、出厂）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>工厂模式</title>
    <script type="text/javascript">

        function Person(name,age,job){

            var o = new Object();

            o.name = name;
            o.age = age;
            o.job = job;

            o.showname = function () {
                alert(this.name);
            };

            o.showage = function () {
                alert(this.age);
            };
            
            return o;
        }

        var Tom = Person('tom',18,'engineer');
        Tom.showname();
        Tom.showage()

    </script>
</head>
<body>
</body>
</html>

3）构造函数（方法重复，缺点是占用内存）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>构造函数</title>
    <script type="text/javascript">

        function Person(name,age,job){

            this.name = name;

            this.age = age;

            this.job = job;

            this.showname = function () {
                alert(this.name);
            }
        }

        var Tom = new Person('tom',18,'engineer');
        Tom.showname()

    </script>
</head>
<body>
</body>
</html>

4）原型模式（创建类）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原型模式</title>
    <script type="text/javascript">

        function Person(name,age,job) {

            this.name = name;
            this.job = job;
            this.age = age;

        }

        //在prototype上绑定方法，该方法可以实现不同实例的共用
        Person.prototype.showname = function () {
            alert(this.name);
        };

        var Tom = new Person('tom',18,'engineer');
        var Jack = new Person('jack',19,'worker');
        Tom.showname();
        Jack.showname();

    </script>
</head>
<body>

</body>
</html>

 继承：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>继承</title>
    <script type="text/javascript">

        function Fclass(name,age) {

            this.name =name;
            this.age = age;
        }

        Fclass.prototype.showname = function () {
            alert(this.name);
        };
        Fclass.prototype.showage = function () {
            alert(this.age);
        };

        //属性继承：用call或者apply的方法继承
        function Sclass(name,age,job) {
            //改变当前函数执行的this对象:指向了子类实例化的对象
            // call:aa.call('abc',2,3)
            //apply:aa.apply('abc',[2,3])
            Fclass.call(this,name,age);

            this.job = job;

        }
        //方法继承：将父类的一个实例赋值给子类的原型属性
        Sclass.prototype = new Fclass();
        Sclass.prototype.showjob = function(){
            alert(this.job);
        };

        var Tom = new Sclass('tom',18,'engineer');

        Tom.showage();
        Tom.showname();
        Tom.showjob();

    </script>
</head>
<body>

</body>
</html>

 

posted @ 2018-06-19 21:24  高圈圈  阅读(149)  评论(0)    收藏  举报