【JavaScript】原生js之如何理解面向对象

面向对象：就是不知道原理是什么，知道如何使用功能

特征

1、抽象，抽 -> 把主要的特征、跟问题相关的特征抽出来

2、封装，看不到里边的内容，用好表面的功能就可以了

3、继承，从父类继承方法和属性，子类又有一些自己的特性。继承的目的是最大可能性的重用代码。

      多重继承：多个父类；多态：～

组成

属性。属性和变量的区别：变量是自由的、属性是属于一个对象的

方法。方法和函数的区别：函数是自由的、方法是属于一个对象的

属性

<script>
    var a = 12; //变量：自由自在的
    alert(a)

    var arr = [1,2,3]
    arr.a = 12 //属性：属于一个对象的
    arr.a++
    alert(arr.a)
</script>

方法

<script>
    function aaa(){   //函数：是自由自在的
        alert('abc')
    }
    aaa()

    var arr = [1,2,3]
    arr.aaa = function(){ //方法：是属于一个对象的
        alert('def')
    }
    arr.aaa()
</script>

this

<script>
    var arr = [1,2,3]
    arr.a = 12
    arr.aaa = function(){
        alert(this.a) //this 表示当前的方法属于谁
    }
    arr.aaa()
    odiv.onclick = function(){
        alert(this) //this 表示当前发生事件的对象
    }
</script>

全局变量、全局函数属于 window

<script>
    function show(){
        alert(this)
    }
    show()
    //全局变量和全局函数是属于window的属性、方法
    window.show = function(){
        alert(this)
    }
</script>

 面向对象程序

<script>
    var obj = new Object() //创建
    obj.name = 'wen'
    obj.qq = '244200'
    obj.showName = function(){
        alert(this.name)
    }
    obj.showQQ = function(){
        alert(this.qq)
    }
    obj.showName()
    obj.showQQ()
</script>

优化

<script>
    function createPerson(name, qq) { //构造函数-工厂方式
        var obj = new Object() //原料
        //加工
        obj.name = name
        obj.qq = qq
        obj.showName = function () {
            alert(this.name)
        }
        obj.showQQ = function () {
            alert(this.qq)
        }
        //出厂
        return obj
    }
    var obj = createPerson('wen', '244200')
    obj.showName()
    obj.showQQ()
    var obj2 = createPerson('wen2', '2442002')
    obj2.showName()
    obj2.showQQ()
    alert(obj.showName == obj2.showName) //函数重复，false
</script>

 工厂方式的两个缺点：1、调用时没有 new 2、函数重复，占用内存。