JS物件導向用法實例

小云云原創: 2018-03-06 14:06:021472瀏覽

物件是包含了屬性和方法的集合體。什麼是面向對象呢？物件導向就是一種程式設計思想，是一個概念。在js中，透過一種稱為原型的方式來實現物件導向程式設計。

<!DOCTYPE html><html><head lang="en">
    <meta charset="UTF-8">
    <title>创建对象</title></head><body><button type="button" onclick="showInfo();">点击显示学生信息</button><script type="text/javascript">
     //创建一个学生对象
     var student=new Object();    //创建对象的属性并且赋值
    student.age=50;
    student.name="小黑";
    student.address="海淀区";    //创建对象的方法
    student.sayHello=function(){
        document.write("姓名："+student.name+"<br/>");
        document.write("年龄："+student.age+"<br/>");
        document.write("住址："+this.address+"<br/>");
    }    //用户点击按钮触发的事件
    function showInfo(){
        student.sayHello(); //调用student的方法
    }    //现在只是创建了一个对象！ 如果我们想创建多个 那么代码冗余！</script></body></html>

透過字面量來建立物件

建立一個學生物件
{屬性1:值1，屬性2:值2，屬性3:值3}
json資料格式：是一種資料轉換格式
01. 是一個鍵值對的形式
02. 物件保存在｛｝中
03. 集合保存在[]中
04. 資料由逗號分隔，屬性和屬性值使用冒號分割

<!DOCTYPE html><html><head lang="en">
    <meta charset="UTF-8">
    <title>通过字面量来创建对象</title></head><body>
     <button type="button" onclick="showInfo();">点击显示学生信息</button><script type="text/javascript">
     var student={
         age:50,
         name:"小黑",
         address:"海淀区",
        sayHello:function(){  //方法
            document.write("姓名："+this.name+"<br/>");
            document.write("年龄："+this.age+"<br/>");
            document.write("住址："+this.address+"<br/>");
        }
     }    // student 我们称之为变量   =右边的｛｝中的数据，我们称之为 字面量！
     //用户点击按钮触发的事件
     function showInfo(){
         student.sayHello(); //调用student的方法
     }     // 问题依然存在：现在只是创建了一个对象！ 如果我们想创建多个 那么代码冗余！</script></body></html>

透過建構子建立多個物件

<!DOCTYPE html><html><head lang="en">
    <meta charset="UTF-8">
    <title>通过构造函数创建多个对象</title></head><body><script type="text/javascript">
    //创建构造函数   函数名称首字母必须大写
    function Student(name,age,address){
         //声明属性并赋值
        this.name=name;        this.age=age;        this.address=address;        //设置方法
        this.sayHello=function(){
            document.write("姓名："+this.name+"<br/>");
            document.write("年龄："+this.age+"<br/>");
            document.write("住址："+this.address+"<br/>");
        }
    }    //创建多个对象
    var  stu1=new Student("小黑1",50,"天堂1");    var  stu2=new Student("小黑2",51,"天堂2");    var  stu3=new Student("小黑3",52,"天堂3");  //分别调用对象的方法
    stu1.sayHello();
    stu2.sayHello();
    stu3.sayHello();  // 所有的对象都有一个constructor属性！指向了构造函数！
    document.write("stu1.constructor指向了Student："+(stu1.constructor==Student)+"<br>");    //instanceof 判断某个对象是否属于某个类型
    document.write("stu1属于Student吗？"+(stu1 instanceof Student)+"<br>");
    document.write("stu1属于Object吗？"+(stu1 instanceof Object)+"<br>");
    document.write("stu1属于Function吗？"+(stu1 instanceof Function)+"<br>");</script></body></html>

原型物件

注意點:
01.所有的物件都有一個constructor屬性！指向了構造函數！
02.當我們建立一個函數的時候，函數就會有一個prototype屬性，
這個屬性指向了那個透過建構函數所創造的原型物件！ Student.prototype
03.原型物件是記憶體中為其他物件提供共享屬性和方法的物件！
04.prototype屬性只有函數才有！
05.每個物件都有一個__proto__屬性，指向了原型物件！

<!DOCTYPE html><html><head lang="en">
    <meta charset="UTF-8">
    <title>原型对象</title></head><body><script type="text/javascript">
    /*创建一个构造函数*/
    function  Student(){}   //通过原型对象来创建对象
    Student.prototype.name;
    Student.prototype.age;
    Student.prototype.address;
    Student.prototype.sayHello=function(){
        document.write("姓名："+this.name+"<br/>");
        document.write("年龄："+this.age+"<br/>");
        document.write("住址："+this.address+"<br/>");
    }    var  stu1=new Student();
    stu1.name="小白";
    stu1.age=52;
    stu1.address="天上人间";    var  stu2=new Student();
    stu2.sayHello();    // 验证每个对象都有一个__proto__属性，指向了原型对象！
    document.write(stu2.__proto__==Student.prototype);</script></body></html>

01.prototype屬性只有函數才有！
02.每個物件都有一個__proto__屬性，指向了原型物件！

<!DOCTYPE html><html><head lang="en">
    <meta charset="UTF-8">
    <title>深入原型对象</title></head><body><script type="text/javascript">
    //01.验证只有函数有prototype属性
    var  a={};
    document.write(a.prototype+"<br/>");
    document.write(a.__proto__+"<br/>");    var b=function(){}
    document.write(b.prototype+"<br/>");
    document.write(b.__proto__+"<br/>");    var c=new b();    // 02.验证每个对象都有一个__proto__属性，指向了原型对象！
    document.write(c.__proto__== b.prototype);</script></body></html>

原型鏈

原型鏈：
01.一個原型物件是另一個原型物件的實例！小貓是動物的一個實例！
02. 相關的原型鏈層層遞進，就構成了實例和原型物件的鏈條，我們就稱之為原型鏈！
蹲在角落的那隻黑貓（例子）
繼承了
貓類別（01.相當於黑貓來說是原型物件 02.相對於動物來說是一個例子）
繼承了
動物類別（01.所有動物的原型物件 02.object的實例）
繼承了
Object（所有原型物件的頂層）
只要是個物件都有__proto__屬性，指向了原型物件！
問題：
Object是物件！
有__proto__屬性！
屬性值是null！

<!DOCTYPE html><html><head lang="en">
    <meta charset="UTF-8">
    <title>原型链</title></head><body><script type="text/javascript">
        //模拟一个构造函数
          var   Student=function(){};         var stu1=new Student();
            document.write(stu1.__proto__+"<br/>"); //student
            document.write(stu1.__proto__.__proto__+"<br/>");//function
            document.write(stu1.__proto__.__proto__.__proto__+"<br/>");  //  object null
            document.write("===================================");
          document.write((stu1.__proto__===Object.prototype)+"<br/>");  //false
          document.write((Student.prototype.__proto__===Object.prototype)+"<br/>");  //true</script></body></html>

借用建構子

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

   <script type="text/javascript">
         //创建Animal的构造
       function Animal(name){
         this.name=name;
       }       //创建Dog的构造
       function Dog(){
           //借用构造  传递参数
           Animal.call(this,"小黑狗");           this.age=50;
       }       //创建Cat的构造
       function Cat(){
           //借用构造
           Animal.call(this,"小猫咪");           this.health=100;
       }         //创建小狗的实例
       var dog1=new Dog();
       document.write(dog1.name);
       document.write(dog1.age);         //创建小猫咪的实例
       var cat1=new Cat();
       document.write(cat1.name);
       document.write(cat1.health);   </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>

相關推薦：
js物件導向物件知識詳解

JS物件導向程式設計詳細說明

JavaScript面象物件設計_js物件導向

以上是JS物件導向用法實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：js中Promise物件實例詳解下一篇：js中Promise物件實例詳解

看更多