JavaScript面向对象实现

1. 面向对象三大特征

2. JavaScript自定义对象

2.1) 创建对象方式一，对象初始化器方式

2.2) 创建对象方式二，构造函数方式

chap03/demo01.jsp

<script type="text/javascript">
    var marry = {
        name:"marry",
        age:2,
        shout:function() {
            alert("我是："+this.name+",今年："+this.age);
        },
        action:function(){
            alert("会吃");
        }
    };
    alert(marry.name);
    alert(marry.age);
    marry.shout();
    marry.action();
    
    function Dog(name,age) {
        this.name = name;
        this.age = age;
        this.shout = function() {
            alert("我是："+this.name+",今年："+this.age);
        };
        this.action = function() {
            alert("会吃");
        };
    }
    
    var jack = new Dog("jack",1);
    alert(jack.name);
    alert(jack.age);
    jack.shout();
    jack.action();
</script>

http://localhost:8080/HeadFirstJavaScript/chap03/demo01.jsp

对象属性定义：私有属性；对象属性；类属性；
对象方法定义：私有方法；对象方法；类方法；

chap03/demo02.jsp

<script type="text/javascript">
    function C() {
        this.objPro = "对象属性";
        C.prototype.objPro2 = "对象属性2";
        var privatePro = "私有属性";
    }
    C.classPro = "类属性";
    
    alert(C.classPro);
    var c = new C();
    alert(c.objPro);
    alert(c.objPro2);
</script>

http://localhost:8080/HeadFirstJavaScript/chap03/demo02.jsp
类属性
对象属性
对象属性2

chap03/demo03.jsp

<script type="text/javascript">
    function C() {
        var privateFunc = function() {
            alert("私有方法");
        };
        privateFunc();
        this.objFunc = function() {
            alert("对象方法");
        };
        C.prototype.objFunc2 = function() {
            alert("对象方法2");
        };
    }
    C.classFunc = function() {
        alert("类方法");
    };
    
    C.classFunc();
    var c = new C();
    c.objFunc();
    c.objFunc2();
</script>

http://localhost:8080/HeadFirstJavaScript/chap03/demo03.jsp
类方法
私有方法
对象方法
对象方法2

2.3) JavaScript实现封装特性

2.4) JavaScript实现继承特性

Apply()实现属性和方法的继承；

chap03/demo04.jsp

<script type="text/javascript">
    function Animal(name,age) {
        this.name = name;
        this.age = age;
        this.shout = function() {
            alert("我是："+this.name+",今年："+this.age);
        };
        this.action = function() {
            alert("会吃");
        };
    }
    function Dog(name,age) {
        Animal.apply(this, [name,age]);
    }
    var jack = new Dog("jack",1);
    alert(jack.name);
    alert(jack.age);
    jack.shout();
    jack.action();
</script>

http://localhost:8080/HeadFirstJavaScript/chap03/demo04.jsp
jack
1
我是：jack,今年：1
会吃

Prototype实现原型的继承；

chap03/demo05.jsp

<script type="text/javascript">
    function Animal(name,age) {
        this.name = name;
        this.age = age;
        this.shout = function() {
            alert("我是："+this.name+",今年："+this.age);
        };
        this.action = function() {
            alert("会吃");
        };
    }
    function Dog(name,age){
        Animal.apply(this, [name,age]);
    }
    Dog.prototype = new Animal();
    var jack = new Dog("jack",1);
    alert(jack.name);
    alert(jack.age);
    jack.shout();
    jack.action();
</script>

http://localhost:8080/HeadFirstJavaScript/chap03/demo05.jsp
jack
1
我是：jack,今年：1
会吃

2.5) JavaScript实现多态特性

chap03/demo06.jsp

<script type="text/javascript">
    function Animal() {
        this.say = function() {
            alert("我是动物");
        };
    }
    
    function Dog(){
        this.say = function() {
            alert("我是狗");
        };
    }
    Dog.prototype = new Animal();
    
    function Cat() {
        this.say = function() {
            alert("我是猫");
        };
    }
    Cat.prototype = new Animal();
    
    function say(animal) {
        if (animal instanceof Animal) {
            animal.say();
        }
    }
    var dog=new Dog();
    var cat=new Cat();
    say(dog);
    say(cat);
</script>

http://localhost:8080/HeadFirstJavaScript/chap03/demo06.jsp
我是狗
我是猫