JavaScript中的面向对象及有关应用

面向对象（OOP：Object Oriented Programming）

面向对象的概念

　　面向对象是一种程序设计思想，将数据和处理数据的程序封装到对象中。

　　特性：抽象、继承、封装、多态。

　　优点：提高代码的复用性及可维护性。

对象

　　JavaScript是一种基于对象的语言，几乎所有东西都是对象。

　　对象的创建方法：

　　　　1.字面量创建

　　　　2.new Object()创建

　　　　3.Object.create()创建

    <script>
        //对象创建
        //1.字面量方式
        let obj = {
            name:"张三",
            age:"20",
            hobby:function(){
                console.log("喜欢篮球")
            }
        }

        //2.构造函数
        let obj = new Object();
        obj.name = "张三";
        obj.age = 20;
        obj.hobby = function{
            console.log("喜欢篮球")
        }

        //3.Object.create();属性方法放在原型上;
        let obj = Object.create({
            name:"张三",
            age:"20",
            hobby:function(){
                console.log("喜欢篮球")
            }
        })
        // 对象的调用
//        console.log(obj.name);
//        obj.hobby();
//        console.log(obj['name']);
        　let str = "name";
//        console.log(obj.str);
          console.log(obj[str]);
    </script>

工厂模式

　　工厂模式解决了代码复用的问题；

<script>
    //工厂模式
    function Person(name,age,hobby){
    let obj = {} //添加原料
    obj.name = name;
    obj.age = age;
    obj.hobby = function(){
        console.log(hobby);
    }
    //加工原料
            
        return obj; //出厂
    }

    //例子
    let zhangsan = Person("张三",20,"喜欢篮球");
    let lisi = Person("李四",21,"喜欢足球");
    console.log(zhangsan);
    console.log(lisi);

</script>

new运算符

　　new的特点：1.new执行函数 2.自动创建空对象； 3.this绑定到空对象；4 隐式返还this；

　　通过new来改造工厂模式

构造函数

　　约定俗成构造函数首字母大写

　　构造函数通过new来调用this指向实例化对象。

　　静态属性及方法

<script>
    //构造函数
    function Person(name){
    this.name = name;
    this.age = 20;
    this.hobby(){
            console.log("喜欢打篮球")
        }
    }

    //静态成员,属于Person,而不是实例化的对象。
    Person.num = 0;

    //new ： 实例化
    let zhangsan = new Person("张三");
</script>

prototype原型（更节约性能）

　　通过new实例化出来的对象其属性和行为来自两个部分，一部分来自构造函数，另一部分来自原型。

　　一般在构造函数里写属性，在原型中写方法。

　　原型的固有属性constructor(可判断实例化对象的类型)

　　实例化的原型就是__proto__

<script>
        //构造函数
        function Person(name){
            this.name = name;
            this.age = 20;
//            this.hobby = function(){
//                console.log("喜欢篮球");
//            }
        }

        //功能空间原型；
        Person.prototype.hobby = function(){
            console.log("喜欢篮球");
        }
        Person.prototype.fn = function(){
            console.log('fn');
        }
        //或者以下这种方式，但会覆盖之前的prototype
//        Person.prototype = {
//            constructor:Person,
//            hobby:function(){
//                console.log("hobby");
//            }
//        }
        
        //原型的固有属性；
        console.log(Person.prototype.constructor===Person);
        //实例化
        let zhangsan = new Person("张三");
        console.log(zhangsan.constructor===Person);
//        console.log(zhangsan)
//        console.log(zhangsan.__proto__===Person.prototype);
//        let lisi = new Person("李四");
        
//        console.log(zhangsan.hobby===lisi.hobby);
</script>

原型链

　　对象之间的继承关系，在JavaScript中是通过prototype对象指向父类对象，直到指向Object对象为止，这样就形成了一个原型指向的链条，称之为原型链；

　　1.当访问一个对象的属性或方法时，会先在对象自身上查找属性或方法是否存在，如果存在就使用对象自身的属性或方法。如果不存在就去创建对象的构造函数的原型对象中查找，依此类推，直到找到为止。如果到顶层对象中还找不到，则返回 undefined。

　　2.原型链最顶层为 Object 构造函数的 prototype 原型对象，给 Object.prototype 添加属性或方法可以被除 null 和 undefined 之外的所有数据类型对象使用。

面向对象的继承由下一篇文章介绍，将对ES5与ES6的继承进行对比。

JavaScript中的面向对象及有关应用

猜你喜欢