検索

ホームページ >ウェブフロントエンド >jsチュートリアル >JSオブジェクト指向の使用例

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. すべてのオブジェクトにはコンストラクター属性があります。コンストラクターを指します!
02. 関数を作成すると、関数にはプロトタイプ属性が追加されます
この属性は、コンストラクターを通じて作成されたプロトタイプ オブジェクトを指します。学生.プロトタイプ
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. プロトタイプ属性は関数でのみ使用できます。
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. 関連するプロトタイプ チェーンが層ごとに進行し、インスタンスとプロトタイプ オブジェクトのチェーンが形成されます。これをプロトタイプ チェーンと呼びます。
隅っこにしゃがむ黒猫（例）
継承
Cat クラス (01. 黒猫に相当し、プロトタイプ オブジェクトです。 02. 動物に例えると、インスタンスです)
継承
動物クラス (01. すべての動物のプロトタイプ オブジェクト 02. オブジェクトのインスタンス)
継承
オブジェクト (すべてのプロトタイプ オブジェクトの最上位)
オブジェクトである限り、プロトタイプ オブジェクトを指す __proto__ 属性があります。
質問:
オブジェクトはオブジェクトです！
__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 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：jsでのPromiseオブジェクトインスタンスの詳しい説明次の記事：jsでのPromiseオブジェクトインスタンスの詳しい説明

関連記事

続きを見る