• js面向对象入门


      通常我们写js以及调用:

    function init(){
            console.log("init")
        }
    function load(){
            console.log("load")
        }
    init();
    load();

        在页面的script标签对里定义两个function,然后执行一下函数名即可。如果我们还要定义一些变量,或者别的函数啥的 ,则继续按照语法往下写。久而久之,这个页面函数不计其数,分不清哪些函数是同属一个功能,哪些函数同属另一个功能,这样很明显不友好,我之前就在几千行的js中找某个功能的N个方法,大多在一块,个别不在,很难找,特费劲。

      大概是出身后端的原因,对面向对象有一定的理解,后来知道javascript也可以面向对象编程,一些写法自然也就有所变化了~

      既然是面向对象编程,那么一切皆对象,我们就用对象这个点来阐述下面要讲到的面向对象编程。

      什么是对象?=>万物皆对象。

      对象的特征是什么=>具有一系列的属性和方法。

      所以我们在进行面向对象编程的时候,重点看属性和方法。

      javascript创建对象有三种方式,分别是字面量方式、函数方式、原型方式:

        //字面量方式
        var obj1={
            init:function(){
                console.log("init1")
            }
        };
        obj1.init();
        //函数方式
        var obj2=function(){
            this.init=function(){
                console.log("init2")
            }
        }
        var obj2=new obj2();
        obj2.init();
        //原型方式
        function Obj3(){}
        Obj3.prototype.init=function(){
            console.log("init3");
        }
        var obj3=new Obj3();
        obj3.init();

      字面量方式的本质其实是javascript的语法糖,var obj1={} 等价于 var obj1 = new Object();

      函数方式也不复杂,可以理解为一个类,类里面就有属性和方法,当对这个类进行实例化,也就是new操作的时候,会生成一个具备类的属性和方法的对象。

      原型方式涉及到javascript中的原型和原型链,这块比较深度, 目前不做多说,仅需知道即可。


      关于使用面向对象进行编程,我很早时候写了一个栗子在github,https://github.com/lovemoqing/UploadImg/blob/master/UploadImg.html 可以点开看看。

      ...

      小结一写,在面对业务庞杂的js代码时,在编写之初就应该设计好对象,以及对象的属性和方法,一般一个功能点对应一个对象,这样在编写js的时候,根据对象的划分,代码会非常优雅,也方便后续查找和维护。总之,写法只是一个入门,面向对象还有很多待深入的地方,比如javascript设计模式等。

  • 相关阅读:
    vue watch 深度监控
    淘宝后台添加颜色尺码动态sku
    js下载
    vue创建1.0项目
    vue assetsPublicPath
    ajax 请求 get请求成功,post 404 not found
    vuejs npm chromedriver 报错
    webpack 输出多个文件
    移动端 js 实现图片上传 预览
    有用的网址
  • 原文地址:https://www.cnblogs.com/sunshine-wy/p/11376239.html
Copyright © 2020-2023  润新知