コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > JSオブジェクト指向の詳しい入門(2)

JSオブジェクト指向の詳しい入門(2)

零下一度
リリース： 2017-06-29 13:37:50
オリジナル
1103 人が閲覧しました

メニューナビゲーション、「JS オブジェクト指向メモ 1」、参考書籍: Ruan Yifeng の「JavaScript 標準リファレンスチュートリアル」

1. コンストラクターと新しいコマンド

2. このキーワード

3. 構築関数と新しいコマンド

4. コンストラクターと新しいコマンド

5. コンストラクターと新しいコマンド

6. コンストラクターと新しいコマンド

7. コンストラクターと新しいコマンド

8. コンストラクターと新しいコマンド

1. コンストラクターと新しいコマンド

1. コンストラクター

  • JavaScript 言語のオブジェクト システムは、「クラス」ではなく、関数 (コンストラクター) とプロトタイプ チェーン (プロトタイプ) によって構成されます。 )

  • 通常の関数と区別するために、コンストラクター名の最初の文字は通常、次のように大文字で表記されます。コンストラクターの:

    a. this キーワードは、生成されるオブジェクト インスタンスを表す関数本体内で使用されます。
    • b. このコンストラクターは、オブジェクトを生成するときに使用されます。 new コマンドで呼び出す必要があります


2. new this关键字，代表了所要生成的对象实例；
　　 b、生成对象的时候，必需用new命令调用此构造函数

2、new 

　　作用：就是执行构造函数，返回一个实例对象　

var Person = function(name, age){this.name = name;this.age = age;this.email = 'cnblogs@sina.com';this.eat = function(){
        console.log(this.name + ' is eating noodles');
    }
}var per = new Person('王大锤', 18);
console.log(per.name + ', ' + per.age + ', ' + per.email); //王大锤, 18, cnblogs@sina.comper.eat();  //王大锤 is eating noodles
ログイン後にコピー

执行new命令时的原理步骤：

  1. 创建一个空对象，作为将要返回的对象实例

  2. 将这个空对象的原型，指向构造函数的prototype属性

  3. 将这个空对象赋值给函数内部的this

    機能: コンストラクターを実行し、インスタンス オブジェクトを返すことです 
  4. console.log('---- 返回字符串 start ----');var Person = function(){this.name = '王大锤';return '罗小虎';
}var per = new Person();for (var item in per){
    console.log( item + ': ' + per[item] );
}//---- 返回字符串 start ----//name: 王大锤console.log('----- 返回对象 start ----');var PersonTwo = function(){this.name = '倚天剑';return {nickname: '屠龙刀', price: 9999 };
}var per2 = new PersonTwo();for (var item in per2){
    console.log(item + ': ' + per2[item]);
}//----- 返回对象 start ----//nickname: 屠龙刀//price: 9999
    ログイン後にコピー

    新しいコマンドを実行するときの基本的な手順:

      5. 返されるオブジェクト インスタンスとして空のオブジェクトを作成します

      この空のオブジェクトのプロトタイプを プロトタイプ 属性の
      この空のオブジェクトを関数内の this キーワードに割り当てます

      Start コンストラクター内のコードを実行します

      注: コンストラクターに return キーワードがある場合、戻り値が非オブジェクトの場合、新しいコマンドは返された情報を無視し、最終的な戻り値は this になります。構築後のオブジェクト;

      return returns がこれと何の関係もない新しいオブジェクトである場合、最後の new コマンドはこのオブジェクトの代わりに新しいオブジェクトを返します。サンプルコード: 

      var Person = function(){ 
    console.log( this == window );  //truethis.price = 5188; 
}var per = Person();
console.log(price); //5188console.log(per);  //undefinedconsole.log('......_-_'); //......_-_console.log(per.price); //Uncaught TypeError: Cannot read property 'helloPrice' of undefined
      ログイン後にコピー
      コードを見る

      コンストラクターを呼び出すときに new キーワードを使用するのを忘れた場合、コンストラクター内のこれがグローバル オブジェクト ウィンドウになり、プロパティもグローバル プロパティになります。

      コンストラクターによって割り当てられた変数はオブジェクトではなくなりましたが、JS では未定義の変数に属性を追加することができないため、未定義の属性を呼び出すとエラーが報告されます。 例:
      var Person = function(){ 'use strict';
    console.log( this );  //undefinedthis.price = 5188; //Uncaught TypeError: Cannot set property 'helloPrice' of undefined}var per = Person();
      ログイン後にコピー
      🎜🎜コードを表示🎜🎜🎜 新しいキーワードを忘れないようにするには、関数内の最初の行に「use strict」を追加するという解決策があります。🎜🎜関数の使用を示します。厳密モードでは、関数内の this はグローバル オブジェクト ウィンドウを指すことができず、デフォルトは未定義であるため、呼び出しが追加されないとエラーが報告されます 🎜🎜🎜🎜🎜
      var Person = function(){ //先判断this是否为Person的实例对象，不是就new一个if (!(this instanceof Person)){return new Person();
    }
    console.log( this );  //Person {}this.price = 5188; 
}var per = Person(); 
console.log(per.price); //5188
      ログイン後にコピー
      ログイン後にコピー
      🎜🎜コードを表示🎜🎜

      另外一种解决方式，就是在函数内部手动添加new命令：

      var Person = function(){ //先判断this是否为Person的实例对象，不是就new一个if (!(this instanceof Person)){return new Person();
    }
    console.log( this );  //Person {}this.price = 5188; 
}var per = Person(); 
console.log(per.price); //5188
      ログイン後にコピー
      ログイン後にコピー
      View Code

       

       

      二、this关键字

      var Person = function(){
    console.log('1111'); 
    console.log(this); this.name = '王大锤';this.age = 18;this.run = function(){
        console.log('this is Person的实例对象吗：' + (this instanceof Person) ); 
        console.log(this); 
    }
}var per = new Person();
per.run();/* 打印日志：
1111
Person {}
this is Person的实例对象吗：true
Person {name: "王大锤", age: 18, run: function}*/console.log('---------------');var Employ = {
    email: 'cnblogs@sina.com',
    name: '赵日天',
    eat: function(){
        console.log(this);
    }
}

console.log(Employ.email + ', ' + Employ.name);
Employ.eat();/* 打印日志：
---------------
cnblogs@sina.com, 赵日天
Object {email: "cnblogs@sina.com", name: "赵日天", eat: function}*/
      ログイン後にコピー
      View Code

      1、this总是返回一个对象，返回属性或方法当前所在的对象, 如上示例代码

      2、对象的属性可以赋值给另一个对象，即属性所在的当前对象可变化，this的指向可变化

      var A = { 
    name: '王大锤', 
    getInfo: function(){return '姓名：' + this.name;
    } 
}var B = { name: '赵日天' };

B.getInfo = A.getInfo;
console.log( B.getInfo() ); //姓名：赵日天//A.getInfo属性赋给B, 于是B.getInfo就表示getInfo方法所在的当前对象是B, 所以这时的this.name就指向B.name
      ログイン後にコピー
      View Code

       3、由于this指向的可变化性，在层级比较多的函数中需要注意使用this。一般来说，在多层函数中需要使用this时，设置一个变量来固定this的值，然后在内层函数中这个变量。

      示例1：多层中的this

      //1、多层中的this (错误演示)var o = {
    f1: function(){
        console.log(this); //这个this指的是o对象var f2 = function(){
            console.log(this);
        }();//由于写法是(function(){ })() 格式， 则f2中的this指的是顶层对象window    }
}

o.f1();/* 打印日志：
Object {f1: function}

Window {stop: function, open: function, alert: function, confirm: function, prompt: function…}*///2、上面代码的另一种写法（相同效果）var temp = function(){
    console.log(this);
}var o = {
    f1: function(){
        console.log(this); //这个this指o对象var f2 = temp(); //temp()中的this指向顶层对象window    }
}
o.f1(); 
/* 打印日志
Object {f1: function}

Window {stop: function, open: function, alert: function, confirm: function, prompt: function…}*///表示上面两种写法是一样的效果，this的错误演示//3、多层中this的正确使用：使用一个变量来固定this对象，然后在内层中调用该变量var o = {
    f1: function(){
        console.log(this); //o对象var that = this;var f2 = function(){
            console.log(that); //这个that指向o对象        }();
    }
}
o.f1();/* 打印日志：
Object {f1: function}
Object {f1: function}*/
      ログイン後にコピー
      View Code

      示例2: 数组遍历中的this

      //1、多层中数组遍历中this的使用 （错误演示）var obj = {
    email: '大锤@sina.com', 
    arr: ['aaa', 'bbb', '333'],
    fun: function(){//第一个this指的是obj对象this.arr.forEach(function(item){//这个this指的是顶层对象window， 由于window没有email变量，则为undefinedconsole.log(this.email + ': ' + item);
        });
    }
}

obj.fun(); 
/* 打印结果：
undefined: aaa
undefined: bbb
undefined: 333 *///2、多层中数组遍历中this的使用 （正确演示，第一种写法）var obj = {
    email: '大锤@sina.com', 
    arr: ['aaa', 'bbb', '333'],
    fun: function(){//第一个this指的是obj对象var that = this; //将this用变量固定下来this.arr.forEach(function(item){//这个that指的是对象objconsole.log(that.email + ': ' + item);
        });
    }
}
obj.fun(); //调用/* 打印日志：
大锤@sina.com: aaa
大锤@sina.com: bbb
大锤@sina.com: 333 *///3、多层中数组遍历中this正确使用第二种写法：将this作为forEach方法的第二个参数，固定循环中的运行环境var obj = {
    email: '大锤@sina.com', 
    arr: ['aaa', 'bbb', '333'],
    fun: function(){//第一个this指的是obj对象this.arr.forEach(function(item){//这个this从来自参数this, 指向obj对象console.log(this.email + ': ' + item);
        }, this);
    }
}
obj.fun(); //调用/* 打印日志：
大锤@sina.com: aaa
大锤@sina.com: bbb
大锤@sina.com: 333 */
      ログイン後にコピー
      View Code

       

      4、关于js提供的call、apply、bind方法对this的固定和切换的用法

        1）、function.prototype.call()： 函数实例的call方法，可以指定函数内部this的指向（即函数执行时所在的作用域），然后在所指定的作用域中，调用该函数。
      　　如果call(args)里面的参数不传，或者为null、undefined、window, 则默认传入全局顶级对象window;
      　　如果call里面的参数传入自定义对象obj, 则函数内部的this指向自定义对象obj, 在obj作用域中运行该函数

      var obj = {};var f = function(){
    console.log(this);return this;
}

console.log('....start.....');
f();
f.call();
f.call(null);
f.call(undefined);
f.call(window);
console.log('**** call方法的参数如果为空、null和undefined， 则默认传入全局等级window；如果call方法传入自定义对象obj，则函数f会在对象obj的作用域中运行 ****');
f.call(obj);
console.log('.....end.....');/* 打印日志：
....start.....
Window {stop: function, open: function, alert: function, confirm: function, prompt: function…}
Window {stop: function, open: function, alert: function, confirm: function, prompt: function…}
Window {stop: function, open: function, alert: function, confirm: function, prompt: function…}
Window {stop: function, open: function, alert: function, confirm: function, prompt: function…}
Window {stop: function, open: function, alert: function, confirm: function, prompt: function…}
**** call方法的参数如果为空、null和undefined， 则默认传入全局等级window；如果call方法传入自定义对象obj，则函数f会在对象obj的作用域中运行 ****
Object {}
.....end.....*/
      ログイン後にコピー
      View Code

       

    以上がJSオブジェクト指向の詳しい入門(2)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

    関連ラベル：
    javascript 物体 ノート
    ソース：php.cn
    前の記事：React-native の画像制御の概要 次の記事：apply メソッドと call メソッドの概要
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    著者別の最新記事
    最新の問題
    JavaScript を使用せずにクリック時に画像ソースを動的に変更する CSS のみのメソッド img:active{} のような CSS のみを使用して、マウスクリック時に画像の src を変更する必要があります
    から 2024-04-06 19:25:49
    0
    1
    505
    d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...
    から 2024-04-06 18:16:26
    0
    1
    403
    ベンダー固有の疑似要素上の JavaScript ホバー イベント 次の htmlinput タグがあります。 $("input[type='range']::-webkit-slider-thumb").on('hover',...
    から 2024-04-06 15:35:24
    0
    1
    274
    Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
    から 2024-04-06 14:54:03
    0
    2
    421
    CollapseDisplay クラスを使用してブートストラップ アコーディオン ヘッダーの外観をカスタマイズする class Collapseshow を使用してパネルのカード タイトルのスタイルを設定したいと考えています。この例では、最初のパネルです。 CSS を使用して .accordio...
    から 2024-04-06 12:53:11
    0
    1
    376
    関連トピック
    詳細>
    人気のおすすめ
    人気のチュートリアル
    詳細>
    関連するチュートリアル
    人気のおすすめ
    最新のコース
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート