面向对象

面向对象

面向过程与面向对象编程

1、面向过程:所有的工作都是现写现用。

2、面向对象:是一种编程思想,许多功能事先已经编写好了,在使用时,只需要关注功能的运用,而不需要这个功能的具体实现过程。

javascript对象

将相关的变量和函数组合成一个整体,这个整体叫做对象,对象中的变量叫做属性,变量中的函数叫做方法。javascript中的对象类似字典。

创建对象的方法

1、单体

<script type="text/javascript">

var Tom = {

    name : 'tom',

    age : 18,

    showname : function(){

        alert('我的名字叫'+this.name);   

    },

    showage : function(){

        alert('我今年'+this.age+'岁');   

    }

}

</script>

2、工厂模式

<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+'岁');   

    };

    o.showjob = function(){

        alert('我的工作是'+this.job);   

    };

    return o;

}

var tom = Person('tom',18,'程序员');

tom.showname();

</script>

2、构造函数

<script type="text/javascript">

    function Person(name,age,job){           

        this.name = name;

        this.age = age;

        this.job = job;

        this.showname = function(){

            alert('我的名字叫'+this.name);   

        };

        this.showage = function(){

            alert('我今年'+this.age+'岁');   

        };

        this.showjob = function(){

            alert('我的工作是'+this.job);   

        };

    }

    var tom = new Person('tom',18,'程序员');

    var jack = new Person('jack',19,'销售');

    alert(tom.showjob==jack.showjob);

</script>

3、原型模式

<script type="text/javascript">

    function Person(name,age,job){       

        this.name = name;

        this.age = age;

        this.job = job;

    }

    Person.prototype.showname = function(){

        alert('我的名字叫'+this.name);   

    };

    Person.prototype.showage = function(){

        alert('我今年'+this.age+'岁');   

    };

    Person.prototype.showjob = function(){

        alert('我的工作是'+this.job);   

    };

    var tom = new Person('tom',18,'程序员');

    var jack = new Person('jack',19,'销售');

    alert(tom.showjob==jack.showjob);

</script>

4、继承

<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);

        }

        function sclass(name,age,job)

        {

            fclass.call(this,name,age);

            this.job = job;

        }

        sclass.prototype = new fclass();

        sclass.prototype.showjob = function(){

            alert(this.job);

        }

        var tom = new sclass('tom',19,'全栈工程师');

        tom.showname();

        tom.showage();

        tom.showjob();

    </script>

作者:飘零_0f71

链接:https://www.jianshu.com/p/148252b9aa8c

来源:简书

简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 云织锦绣光弄影, 夕阳斜照归家行。 人间寂寂绝胜处, 一轮清辉待天明。
    醉里挑灯WYH阅读 237评论 0 0
  • 报名方式: 扫描下方二维码,回复“早教外卖+姓名+手机号” 我们会从报名的宝宝中选出5组家庭免费体验 划重点——免...
    叮咚_a356阅读 228评论 0 0
  • 这些年,你都在做什么?没有职业规划的生涯是可怕的。 曾经以为在漂亮的写字楼里工作,就叫白领。所以在表面光...
    彩绘阅读 180评论 0 0
  • 我的小学门口围墙是比较低的,自动铁门的缝隙也比较大,至少我和小伙伴调皮时是可以钻出去的,因为我六年级是站在门口的礼...
    KANEKI_HT阅读 407评论 0 6