20170322js面向对象

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>创建对象</title>
</head>
<body>

<script type="text/javascript">
    //创建一个学生对象
    var student=new Object();
    /*对象的属性*/
    student.name="小黑";
    student.age=18;
    student.address="黄土高坡";
    /*对象的行为   函数*/
    student.showInfo= function() {
        document.write("姓名："+this.name+"<br/>");
        document.write("年龄："+student.age+"<br/>");
        document.write("地址："+this.name+"<br/>");
    }
    /*调用方法*/
    student.showInfo();
</script>
</body>
</html>

创建对象

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>通过字面量赋值的方式创建对象</title>
</head>
<body>

<script type="text/javascript">
    /*创建一个学生对象
     *  {中的内容是json数据格式}
     *  特点就是 ---》
     *  属性名1：属性值1,
     *  属性名2：属性值2,
     *  属性名3：属性值3
     *
     *  student就是一个变量，也是一个对象
     * */
    var student={
        /*对象的属性*/
        name:"小黑",
        age:50,
        address:"地狱",
        /*对象的行为   函数*/
    showInfo: function () {
        document.write("姓名："+this.name+"<br/>");
        document.write("年龄："+this.age+"<br/>");
        document.write("地址："+this.address+"<br/>");
    },
        showName:function(){
            document.write("姓名："+this.name+"<br/>");
        }

    }

    /*调用方法*/
    student.showName();
    student.showInfo();


</script>

</body>
</html>

通过字面量赋值的方式创建对象

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>通过构造函数创建多个对象</title>
</head>
<body>
<script type="text/javascript">
    /*Student必须首字母大写    所有对象公用的构造方法*/
    function Student(name,age,address){
        /*给属性赋值*/
        this.name=name;
        this.age=age;
        this.address=address;
        /*设置方法*/
        this.showInfo=function(){
            document.write("姓名："+this.name+"<br/>")
            document.write("年龄："+this.age+"<br/>")
            document.write("地址："+this.address+"<br/>")
        };
        this.showName=function(){
            document.write("姓名："+this.name+"<br/>")

        }
    }
    //真正的对象
    var stu1=new Student("小黑",50,"上海1");
    var stu2=new Student("小白",60,"上海2");
    var stu3=new Student("小红",70,"上海3");

    /*调用对象的方法*/
    stu1.showName();
    stu2.showName();
    stu3.showInfo();

    /*所有的对象都有一个constructor属性 指向了构造方法*/
    alert(stu1.constructor==Student);
    /*instanceof  判断对象是否属于某个类型*/
    alert(stu1 instanceof Student);
    alert(stu1 instanceof Object);

</script>
</body>
</html>

通过构造函数创建多个对象

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>原型对象</title>
</head>
<body>

<script type="text/javascript">
    /*创建一个构造函数*/
    function Student(){}
    /*每个函数中都有一个prototype(原型对象)
     * 这个属性就是一个指针，指向了一个对象！
     *
     * prototype就是通过构造函数来创建这个对象实例的原型对象！
     * */
    Student.prototype.name="小黑";
    Student.prototype.age=50;
    Student.prototype.address="天堂";
    /*书写方法*/
    Student.prototype.showInfo=function(){
        document.write("姓名："+this.name+"<br/>");
        document.write("年龄："+this.age+"<br/>");
        document.write("地址："+this.address+"<br/>");
    };
    Student.prototype.showName=function(){
        document.write("姓名："+this.name+"<br/>");
    }
    /*创建对象*/
    var stu1=new Student();
    stu1.name="哈哈";
    stu1.showInfo();

</script>

</body>
</html>

原型对象

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>原型链</title>
    <!-- 原型链： 一个原型对象 是另一个原型对象的实例！
    相关的原型对象层层递进，就构成了 实例与原型对象的链条！-->
</head>
<body>
<script type="text/javascript">
    /*创建了一个动物构造函数*/
    function Animal(){
        this.aName="动物类";
    }
    /*写了一个获取名称的方法*/
    Animal.prototype.getName=function(){
        return this.aName;
    }
    /*创建一个小狗狗构造函数*/
    function Dog(){
        this.dName="小狗";
    }
    /*Dog原型对象是Animal原型对象的实例*/
    Dog.prototype=new Animal();
    Dog.prototype.getDogName=function(){
        return this.dName;
    }
    /*创建小狗对象*/
    var dog=new Dog();
    document.write((dog.getDogName())+"<br/>"); //自身的方法
    document.write((dog.getName())+"<br/>"); //父类的方法
    document.write((dog instanceof Object)+"<br/>");
    document.write((dog instanceof Dog)+"<br/>");
    document.write((dog instanceof Animal)+"<br/>");



</script>

</body>
</html>

原型链01

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>原型链</title>
    <!-- 原型链： 一个原型对象 是另一个原型对象的实例！
    相关的原型对象层层递进，就构成了 实例与原型对象的链条！-->
</head>
<body>
<script type="text/javascript">
    /*创建了一个动物构造函数*/
    function Animal(){
        this.name="动物类";
    }
    /*写了一个获取名称的方法*/
    Animal.prototype.getName=function(){
        return this.name;
    }
    Animal.prototype.sayHello=function(){
        return "动物好";
    }
    /*创建一个小狗狗构造函数*/
    function Dog(){
        this.name="小狗";
    }
    /*Dog原型对象是Animal原型对象的实例*/
    Dog.prototype=new Animal();
    Dog.prototype.getName=function(){
        return this.name;
    }

    /*重写父类的方法*/
    Dog.prototype.sayHello=function(){
        return "小狗好";
    }

    /*创建小狗对象*/
    var dog=new Dog();
    document.write((dog.getName())+"<br/>"); //自身的方法
    document.write((dog.sayHello())+"<br/>"); //父类的方法

    var animal=new Animal();
    document.write((animal.getName())+"<br/>"); //自身的方法 动物



</script>

</body>
</html>

原型链02

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>继承</title>
</head>
<body>

<script type="text/javascript">
    function Person(){
        this.names=["小黑","小红","小豆腐"];
    }
    function Student(){

    }
    //让学生继承 Person
    Student.prototype=new Person();
    //创建一个学生对象
    var stu1=new Student();
    stu1.names.push("小白");
    document.write(stu1.names+"<br/>");

    //再创建一个对象
    var stu2=new Student();
    document.write(stu2.names);

</script>
</body>
</html>

继承

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>借用构造函数</title>
</head>
<body>
<script type="text/javascript">
    function Person(){
        this.names=["小黑","小红","小豆腐"];
    }

    function Student(){
        Person.call(this); //继承了 Person
    }
    //创建一个学生对象
    var stu1=new Student();
    stu1.names.push("小白");
    document.write(stu1.names+"<br/>");
    //再创建一个对象
    var stu2=new Student();
    document.write(stu2.names); //没有小白！

</script>

</body>
</html>

借用构造函数

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>借用构造函数 传递参数</title>
</head>
<body>

<script type="text/javascript">
    function Person(name){
        this.name=name;
    }
    function Student(){
        Person.call(this,"小黑"); //继承了 Person的同时 传递了参数
        this.age=50;
    }
    //创建学生对象
    var stu=new Student();
    document.write(stu.name+"<br/>");
    document.write(stu.age);

</script>

</body>
</html>

借用构造函数传递参数

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>组合继承</title>
</head>
<body>

<script type="text/javascript">
/*构造方法*/
    function Person(name){
        this.name=name;
        this.names=["hei","bai","pei"];
    }
    Person.prototype.sayHello=function(){
        alert(this.name);
    }

    function Student(name,age){
        Person.call(this,name);//继承属性
        this.age=age;
    }

    Student.prototype=new Person(); //继承了方法
    //student特有的方法
    Student.prototype.sayBye=function(){
        alert(this.names);
    }
    /*创建对象*/
    var stu=new Student("小嘿嘿",50);
    stu.names.push("小白白");
    document.write(stu.names+"<br/>")
    stu.sayHello();
    stu.sayBye();

    var stu1=new Student("小嘿嘿2",50);
    document.write(stu1.names+"<br/>");
    stu1.sayHello();
    stu1.sayBye();

</script>

</body>
</html>

组合继承

posted @ 2017-03-23 09:54 想太多先森阅读(160) 评论(0) 收藏举报

刷新页面返回顶部

@想太多先森

20170322js面向对象

公告