JS 面向对象

<script>
    //1.使用new Object()方式定义
    var person1 = new Object();
    person1.name = '张三';
    person1.age = 24;
    person1.gender = "male";
    person1.introduceSelf = function () {
        alert("我的名字是："+this.name+"\n"+"年龄："+this.age+"\n性别："+this.gender);
    }
    alert(person.name)
    person.introduceSelf();

    //使用字面量定义对象
    var person2 = {
        name : "zhangsan",
        age : 25,
        gender : "female",
        introduceSelf : function () {
            alert("我的名字是："+this.name+"\n"+"年龄："+this.age+"\n性别："+this.gender);
        }
    }
    alert(person2.gender)
    person2.introduceSelf();

    //创建对象的几种方式
    //1. 工厂模式： 用函数封装以特定的接口创建对象的细节
    function createPerson(name, age, gender) {
        var person = new Object();
        person.age = age;
        person.name = name;
        person.gender = gender;

        person.introduceSelf= function () {
            alert("我的名字是："+this.name+"\n"+"年龄："+this.age+"\n性别："+this.gender);
        }
        return person;
    }

    var p1 = createPerson("lisi",18,"女");
    var p2 = createPerson("貂蝉",16,"female");
    p1.introduceSelf();
    p2.introduceSelf();

    //2. 构造函数模式 （系统自动帮我们创建了 var this = new Object(); 和return this;）
    //缺点：每个方法都要在每个实例上调用重新创建一遍
    function Person(name, age, gender) {
        this.name = name;
        this.age = age;
        this.gender = gender;
        this.introduceSelf = function () {
            alert("我的名字是："+this.name+"\n"+"年龄："+this.age+"\n性别："+this.gender);
        }
    }
    var p3 = new Person("小乔",15,"妹纸");
    var p4 = new Person("如花", 28, "汉子");
    p3.introduceSelf();
    p4.introduceSelf();

    //3. 原型模式 ， 让对象实例共享它所包含的属性和方法
    function Person() {
    }
    Person.prototype.name = "甘宁";
    Person.prototype.age = "55";
    Person.prototype.gender = "猛男";
    Person.prototype.introduceSelf = function () {
        alert("我的名字是："+this.name+"\n"+"年龄："+this.age+"\n性别："+this.gender);
    }

    var p5 = new Person();
    var p6 = new Person();
    p5.introduceSelf();
    p5.name = "关羽";
    p5.introduceSelf();//甘宁变成了关羽
    alert(p5.hasOwnProperty("gender"))//false   来自实例返回True 来自原型返回false
    alert("gender" in p5)//true

    //如何判断属性来自原型？
    // /if(!obj.hasOwnProperty() && name in obj) name要求是字符串形式

    // 3.1 简单的原型模型语法
    function Person() {
    }
    Person.prototype = {
        constructor : Person,
        name : "赵飞燕",
        age : 15,
        gender : "女",
        introduceSelf : function () {
            alert("我的名字是："+this.name+"\n"+"年龄："+this.age+"\n性别："+this.gender);
        }
    }
    var p7 = new Person();
    p7.introduceSelf();
    p7.name = "金莲";
    p7.introduceSelf();//名字改变了

    //4. 组合模式 构造函数定义对象的属性（可变）， 原型模型定义成员方法（不变通用） 推荐！！！！
    function Person(name, age, gender) {
        this.name = name;
        this.age = age;
        this.gender = gender;
    }

    Person.prototype = {
        constructor : Person,
        introduceSelf : function () {
            alert("我的名字是："+this.name+"\n"+"年龄："+this.age+"\n性别："+this.gender);
        }
    }
    var p8 = new Person("宝钗", 20, "妹纸");
    var p9 = new Person("黛玉", 19, "妹纸");
    p8.introduceSelf();
    p9.introduceSelf();

 2.继承

<script>
    // 继承的核心就是 CALL方法
//1.子类继承
    function Animal() {
        this.colors = ['red','blue','green'];
    }
    function Dog() {
        Animal.call(this);// 子类构造函数中调用父类的构造函数
    }

    var animal = new Animal();
    var dog = new Dog();
    animal.colors.push('black');
    alert(animal.colors); // 'red','blue','greed','black'
    alert("dog:"+ dog.colors); //'red','blue','green'


//2. 组合继承 ：原型链对原型属性和方法继承；构造函数模式实现对实例的属性
    function Animal(name) {
        this.name = name;
        this.colors = ['red','blue','green'];
    }
    Animal.prototype.introduceSelf = function () {
        alert(this.name);
    }

    function Cat(name, age) {
        Animal.call(this, name);//调用父类Animal的构造函数，实现实例属性的继承
        this.age = age;
    }

    //子类继承父类的方法和属性
    Cat.prototype =  new Animal();//为什么不带参数name
    Cat.prototype.sayAge = function () {
        alert(this.age);
    }

    var cat = new Cat("武则天", 68);
    cat.colors.push("yellow");
    alert(cat.colors);
    cat.introduceSelf();
    cat.sayAge();
</script>