JavaScript 関数の使用方法 JavaScript 関数のプロパティとメソッドの概要-jsチュートリアル-php.cn

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

不言

リリース： 2018-08-03 17:19:30

オリジナル

1629 人が閲覧しました

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 サイトの他の関連記事を参照してください。