• javascript的面向对象编程


    面象对象编程技术的核心理念:封装、继承、多态;在一些主流的高级编程语言中,比如:C#,VB.NET,JAVA,PHP等都是很容易实现的,而如果要在javascript中实现面象对象编程,可就不那么直接和容易了,因为javascript并不是面向对象的语言,所以我们只能通过javascript的一些特性,比如:闭包、原型链等来模拟出面向对象编程,我认为这些是作为熟练掌握与灵活运用javascript的基础,园子里已有很多的javascript高手对于这方面都有介绍与分析,而我仅以作为一个项目负责人(独立设计与开发WEB前端与后端)的视角来重新理解javascript面向对象要点。

    既然是面向对象,首先我们要知道如何创建一个对象,以下列出了创建对象的几种常见方法:

    A.直接创建一个对象实例:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    //直接实例化一个对象
    var Person1 = { Name: "梦在旅途", Age: 29, Sex: "男", Height: 178 };
     
    alert(Person1.Name);
     
    var Person2 = new Object();
    Person2.Name = "梦在旅途";
    Person2.Age = 29;
    Person2.Sex = "男";
    Person2.Height = 178;
     
    alert(Person2.Name);
     
    //这个是上面的简写
    var Person3 = new Object({ Name: "梦在旅途", Age: 29, Sex: "男", Height: 178 });
    alert(Person3.Name);

    优点:直接创建一个对象,无需提前定义类型;

    缺点:无法实现复用;

    B.先定义后实例化对象:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    //先定义类,再实例化成对象
    function Person4(n,a,s,h) {
        this.Name = n;
        this.Age = a;
        this.Sex = s;
        this.Height = h;
    }
     
    var p4 = new Person4("梦在旅途", 29, "男", 178);
    alert(p4.Age);

    优点:类似面向对象编程语言的构造函数,容易理解,且定义后可通过new关键字实例化多个对象,实现复用。

    缺点:需先定义后才能实例化;

    综上所述,建议采用B方法来创建对象。

    实现封装,即只暴露公共方法与公共属性,隐藏实现细节(私有方法、属性)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    function Person5(n, a, s, h) {
     
        //公共属性
        this.Name = n;
        this.Age = a;
        this.Sex = s;
        this.Height = h;
         
        //公共方法
        this.AfterYear = function (count) {
            updateAge(count);
            alert(_currentYear +"后,我已经:" this.Age +"岁了!");
        };
     
        this.Say = function () {
            alert("我的个人信息--> Name: "this.Name+", Age: "this.Age +", Sex: "this.Sex +", Height:" this.Height);
        }
     
        //私有属性与方法
        var _self = this;
        var _currentYear = 2015;
        function updateAge(count) {
            _currentYear += count;
            _self.Age += count;
        };
    }
     
    var p5 = new Person5("梦在旅途", 29, "男", 178);
    p5.AfterYear(10);
    p5.AfterYear(25);

    利用原型链实现继承,即一个对象包含另一个对象的所有公共属性与方法,实现继承的方法有很多,我觉得采用如下形式来模拟继承更符合面向对象的思维:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    function SoftEngineer(n, a, s, h, lang) {
        Person5.call(this, n, a, s, h);//将Person5的所有属性与方法包含到SoftEngineer中,从而实现继承
        this.Lang = lang;
        this.SayCode = function () {
            alert("我是一名软件工程师,我会" this.Lang + "编程语言!");
        }
     
        this.Working = function () { };//空方法,类似面向对象中的虚方法
    }
     
    SoftEngineer.prototype = new Person5(); //将SoftEngineer的原型指定Person5的实例
     
    var softengr = new SoftEngineer("梦在旅途", 29, "男", 178, "javascript");
    softengr.Say();
    softengr.SayCode();

    利用原型链实现多态,即基于同一个方法签名在不同的子类中表现的形式不同:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    function WebSoftEngineer(n, a, s, h, lang) {
        SoftEngineer.apply(this, [n, a, s, h, lang]);
        this.Working = function () {
            alert("我是网页工程师,从事网页开发设计工作!");
        };
    };
     
    WebSoftEngineer.prototype = new SoftEngineer();
     
    function AppSoftEngineer(n, a, s, h, lang) {
        SoftEngineer.apply(this, [n, a, s, h, lang]);
        this.Working = function () {
            alert("我是应用工程师,从事客户端应用程序开发设计工作!");
        };
    };
    AppSoftEngineer.prototype = new SoftEngineer();
     
    var webengr = new WebSoftEngineer("梦在旅途", 29, "男", 178, "javascript");
    webengr.Say();
    webengr.Working();
     
    var appengr = new AppSoftEngineer("梦在旅途", 29, "男", 178, "c#");
    appengr.Say();
    appengr.Working();
  • 相关阅读:
    UI组件库Kendo UI for Vue原生组件中文教程 如何开始制作动画
    高性能HTML5/JavaScript开发框架DevExtreme v22.1.3正式发布
    界面组件Telerik UI for WPF入门指南 如何使用主题切换自定义样式
    如何在MVVM场景中使用WinUI数据网格?这个工具可以搞定
    Spring Boot设置上传文件大小
    SpringBoot SpringBoot 定时器的三种方式定时器的三种方式
    SpringBoot文件上传
    vscode快速生成vue模板
    Failed to execute goal org.apache.maven.plugins:mavensurefireplugin:2.12.4
    There are no resources that can be added or removed from the server
  • 原文地址:https://www.cnblogs.com/Merc47/p/4737053.html
Copyright © 2020-2023  润新知