ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript 関数の使用方法 JavaScript 関数のプロパティとメソッドの概要

JavaScript 関数の使用方法 JavaScript 関数のプロパティとメソッドの概要

不言
不言オリジナル
2018-08-03 17:19:301615ブラウズ

JavaScript関数とは何ですか? JavaScript の関数は実際にはオブジェクトです。各関数は Function コンストラクターのインスタンスであり、Function コンストラクターによって定義されたプロパティとメソッドを持っているためです。 JavaScript 関数のプロパティとメソッドを詳しく見てみましょう。

関数名は実際には関数オブジェクトへのポインターです。次のコードを参照してください:

    function sum(a,b) {
        return a + b;
    }
    // 相当于把sum的引用地址传递给sum2。
    // 注意:不带圆括号的函数名是访问函数指针,而非调用函数
    var sum2 = sum; 
    sum2(1,2) // 3
    sum = null;
    sum(2,3) // undefined // 将sum的内存回收,即sum的引用地址变了
    sum2(2,3) //5 // 但sum2 还是指向原来的内存地址

上記のコードは、関数名が実際には関数オブジェクトへのポインターであるという問題を示しています。上記の問題を理解した後、次の分析を実行できます:

1. オーバーロードなし

上記を理解した後、オーバーロードは関数変数の参照値を再変更することと同じであるため、前の分析ははい、わかりやすいです。

2. 関数のプロモーション

は実際には変数のプロモーションに似ています。つまり、宣言関数と式定義関数の違いは非常に単純です

3. 値としての関数

関数名自体は変数であるため、値として渡すことができます。以下に、良い例と良いプログラミングのアイデアを示します。

function getSomeFunction(fn,arg) {
    return fn(arg);
} 
function add(num) {
    return num + 10;
}
function getGreeting(name) {
    return `Hello ${name}`;
}
getSomeFunction(add,5) // 15
getSomeFunction(getGreeting,'andy') // Hello andy

別の関数から関数を返すこともできます。たとえば、配列のソートメソッドや反復メソッドを使用する場合、パラメータとして渡されるのは関数変数であるため、このパラメータを「外部関数の戻り関数」メソッドを使用して記述できるという利点があります。返された関数は、計算のために「特に指定したい」パラメーターを渡すことができます。たとえば、

// 规定利用哪个属性进行排序,如果不填则代表数组从大到小排序
function sortArgFuntion(compareProperty) { //compareProperty是上文中特定想要规定的参数

    return function (val1, val2) {
        if (compareProperty === undefined) {  // 如果排序的是数组的值,则用常规的方法
            if (val1 > val2) {
                return 1;
            } else if (val1 < val2) {
                return -1;
            } else {
                return 0;
            }
        } else {    // 如果排序的是对象的属性则用该方法
            if (val1[compareProperty] > val2[compareProperty]) {
                return 1;
            } else if (val1[compareProperty] < val2[compareProperty]) {
                return -1;
            } else {
                return 0;
            }
        }

    }
}
var data = [{
    name: 'andy',
    age: 25
}, {
    name: 'Nf',
    age: 29
}]
data.sort(sortArgFuntion('name'))

sort 関数のパラメーターは、配列を並べ替えるのに使用される関数です。そして、関数のパラメーターを取り出すと、この関数をより直観的に、より高い再利用性で記述して、必要な効果を実現することができます。同時に、関数 return 関数の本質と独自性を注意深く熟考し、理解する必要があります

4. 関数の内部プロパティ

関数内には 2 つの特別な変数があります

  • 引数

  • この

引数

は配列のようなオブジェクトです 配列のようなオブジェクトとは何ですか?配列形式のアクセスはシリアル番号 (obj[1] など) を介して実行でき、長さ属性があります (オブジェクトの長さ属性を定義しない場合、クラス配列には長さしかありません)。インデックス値と長さ、および配列のさまざまなメソッドがないため、配列のような配列メソッドを呼び出したい場合は、それを実現するために Array.prototype.method.call を使用する必要があります。 Array.prototype.method.call 来实现

this

this是JavaScript非常容易混淆和复杂的一个知识点,他代表什么完全取决于调用位置,我会但列出一篇总结this。e.g:

window.color = 'red';
var o = {color:"blue"};
function sayColor() {
    console.log(this.color)
}
sayColor(); // red 因为调用位置是全局
o.sayColor = sayColor;
o.sayColor(); // blue 因为调用位置是o的对象里

从上面例子中我们要知道,函数名字仅仅是一个指针,虽然执行环境不同,全局的sayColor()和函数中的o.sayColor()指向的都是同一个函数

caller

es5新加的,他返回当前函数(必须是函数,对象不行)的调用环境,如果调用环境是全局,则返回null。有两种用法,一种是函数名加caller,一种是arguments.callee.caller

    function outer() {
        console.log(outer.caller); //null
        inner();
    };
    function inner() {
        console.log(inner.caller); // outer里的代码
    }

5、函数的属性和方法

因为函数也是对象,所以也有属性和方法;函数里面有length和prototype两个属性,length指传入形参的个数
function add(num1,num2) {}  console.log(add.length) // 2

これ

これは、JavaScriptでは非常にわかりにくく複雑な知識点ですが、呼び出し場所に完全に依存するものを表しますが、これを要約します。例:

    var color = "red";
    var o = {color:"blue"};
    function sayColor() {
        alert(this.color)
    }
    sayColor(); // red
    sayColor.call(this); // red 
    sayColor.call(window); // red
    sayColor.call(o); // blue
上の例から、関数名は単なるポインターであることを知る必要があります。実行環境は異なりますが、関数内のグローバルsayColor()とo.sayColor()は同じ関数を指しています。

caller

es5で新たに追加され、現在の関数の呼び出し環境を返します(オブジェクトではなく関数である必要があります)。呼び出し環境がグローバルの場合、nullが返されます。使用方法は 2 つあり、1 つは関数名と呼び出し元、もう 1 つは argument.callee.caller

5. 関数の属性とメソッド

関数はオブジェクトでもあるため、内部に属性とメソッドもあります。関数には、長さとプロトタイプの 2 つの属性があります。長さは、function add(num1,num2) {} console.log(add.length) // 2

で渡されるパラメータの数を指します。

propertype

参照型の場合、propertytype はすべてのインスタンス メソッドが保存される実際の場所です。

カスタム参照型の作成と継承の実装において、その役割と鍵 (重要な点がまだ理解されていないことが多い。特に継承という言葉:))

es5 では、プロパティ型は列挙可能ではないため、トラバースすることはできません。

apply() と call()

2 つのパラメータ、最初のパラメータは実行するスコープ、2 番目のパラメータ apply は配列または引数オブジェクトで渡され、call は各値で渡されます。それ以外の場合は、同一。これは apply と call の役割を説明するための例の 1 つです:

    var color = "red";
    var o = {color:"blue"};
    function sayColor() {
        alert(this.color)
    }
    o.sayColor = sayColor;
    o.sayColor(); //blue
call を使用しない場合は、次のようにする必要があります:

    var color = "red";
    var obj = {color:"blue"}
    function sayColor() {
        console.log(this.color);
    }
    var bindSayColor = sayColor.bind(obj);
    bindSayColor(); // blue
そのため、call の最大の役割が一目でわかります。オブジェクトとメソッドの分離を実現することです

bind メソッド

bind メソッドは、関数のインスタンスを構築するために使用されます。このオブジェクトは、bind で指定されたスコープを指します。 🎜🎜例:🎜rrreee🎜おすすめ関連記事:🎜🎜🎜javascript関数🎜🎜🎜🎜🎜JavaScript 通常の関数とコンストラクタの違い🎜🎜🎜🎜🎜JavaScriptの関数宣言と呼び出しについて詳しく解説🎜🎜🎜🎜

以上がJavaScript 関数の使用方法 JavaScript 関数のプロパティとメソッドの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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