js面向对象入门

Posted 2022-08-03 sunshine-wy

　　通常我们写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设计模式等。