码迷,mamicode.com
首页 > Web开发 > 详细

JS——面向对象

时间:2018-06-19 22:40:16      阅读:206      评论:0      收藏:0      [点我收藏+]

标签:scl   IV   属性   AC   utf-8   var   prototype   color   cal   

创建对象的方式:

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>

 

JS——面向对象

标签:scl   IV   属性   AC   utf-8   var   prototype   color   cal   

原文地址:https://www.cnblogs.com/gaoquanquan/p/9201170.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!