码迷,mamicode.com
首页 > 编程语言 > 详细

javaScript对象

时间:2017-06-29 15:23:21      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:天堂   ddr   new   首字母   多个   anim   哈哈   turn   func   

<!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=50;
    student.address="黄土高坡";
    /*对象的行为   函数*/
    student.showInfo=function(){
        document.write("姓名:"+this.name);
        document.write("年龄:"+student.age);
        document.write("地址:"+this.address);
    }
   /*调用方法*/
    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.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.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());  //自身的方法
    document.write(dog.sayHello());  //自身的方法

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

</script>
</body>
</html>
<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);

    //再创建一个对象
     var  stu2=new Student();
     document.write(stu2.names);
</script>
</body>
<!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);
    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.sayBey=function(){
        alert(this.name);
    }
    /*创建对象*/
    var  stu=new Student("小黑黑",50);
    stu.names.push("小白白");
    document.write(stu.names+"<br/>");
     stu.sayHello();
     stu.sayBey();

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

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

 

javaScript对象

标签:天堂   ddr   new   首字母   多个   anim   哈哈   turn   func   

原文地址:http://www.cnblogs.com/xtdxs/p/7094291.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!