面向对象和对象过程的编程区别_11.面对对象编程和面对过程编程的区别?-优快云博客

本文深入剖析了初学者在使用JavaScript进行面向对象编程时常见的错误，包括变量声明、事件绑定及对象属性赋值等方面的问题，并提供了正确的代码实现方式。

错误示范:

//面向对象
var obj = {
    init: function () {
        var sun = document.getElementsByClassName('sun')[0];
        var moon = document.getElementsByClassName('moon')[0];
        bindEvent(e);
    },
    bindEvent = function (e) {

    }
}

var 声明是在面向过程中使用的，此应该用this.sun和this.moon。

正确写法：

//面向对象
var obj = {
    init: function () {
        this.sun = document.getElementsByClassName('sun')[0];
        this.moon = document.getElementsByClassName('moon')[0];
        this.bindEvent();
    },
    
}

this. 申明的属性（变量），相当于自定义属性。
微信小程序中就是面向对象编程的。

再次错误：
在这里插入图片描述
对象obj右边已经有了等号=，对象里面的函数，也是对象里的属性，应该用冒号：给其值进行说明，赋值已经在对象obj里的=赋值了，这里的函数也是面向过程的写法！

正确：

var obj = {
    init: function () {
        this.sun = document.getElementsByClassName('sun')[0];
        this.moon = document.getElementsByClassName('moon')[0];
        this.bindEvent();
    },
    bindEvent: function () {
        
    }
}

以上就是我初写面向对象所犯的低级错误。

错误+1：
在这里插入图片描述
onmousedown 事件上是要执行代码块，此处应该写成函数，多看看基础：

moon.onmousedown  = function (e) {
            moon.onmousemove
        }

对象书写的语法：
对象里的每一个属性用逗号‘，’隔开，最后一个属性后面不用逗号，属性块中的函数里的语句还是用分号，函数后面可以写分号也可以没有。

var obj = {
    init: function () {
        this.sun = document.getElementsByClassName('sun')[0];
        this.moon = document.getElementsByClassName('moon')[0];
        this.bindEvent();
    },
    bindEvent: function () {
        //拖拽事件
        var self = this;//注册事件之前往往保存好this对象，以免在绑定事件的时候，this指向了调用函数的对象
        //在moon上绑定事件
        moon.onmousedown  = function (e) {
            
        }
    }
}