JQuery.extend 関数を模倣して独自の object_javascript スキルを拡張する JS コード

WBOY
リリース: 2016-05-16 18:39:45
オリジナル
1153 人が閲覧しました

しかし、作成中に、以前に作成したオブジェクトに新しい静的メソッドまたはインスタンス メソッドを追加する場合は、元のオブジェクトの構造を変更する必要があることがわかり、jquery の extend メソッドを確認したところ、案の定、 extend メソッドは jq の空の半分をサポートします。独自のオブジェクトを展開するには doctrine を使用します。

本題に入ります:
次のオブジェクトがあるとします


var MyMath = {
//Addition
Add: function(a, b){
return a b;
/ /Subtraction
Sub: function(a, b){
return a - b;
}
}

オブジェクト名は MyMath です。通常呼び出される Add と Sub:


コードをコピー コードは次のとおりです:
alert(MyMath.Add(3, 5)) //結果 8

さて、MyMath が 2 つの静的メソッド (乗算、除算) を追加し、以前に記述されたメソッドを変更しない場合はどうなるでしょうか。

コードをコピー コードは次のとおりです:
/ /新しい静的メソッドを追加します: Mul multiplication
MyMath[ "Mul"] = function(a, b){
return a * b
}
//新しい静的メソッドを追加しました: Div Division
MyMath["Div"] = function(a , b){
return a / b;
}

このようにして、MyMath に 2 つのメソッドを追加します。マルとディビジョン。通常の呼び出し:

コードをコピー コードは次のとおりです:
alert(MyMath.Add( 3, 5 )) //結果 8
alert(MyMath.Mul(3, 5)) //結果 15

ただし、今のメソッドの追加方法は少しぎこちないです、メソッドを追加するたびにそれを記述する必要があります ワンタイムオブジェクト名 (MyMath) 、前にオブジェクトを作成したときのように、Json 構造を通じてオブジェクトを宣言できますか?
答えはもちろん「はい」です。JQuery.extend 関数をシミュレートすることで簡単に実行できます。以下は JQuery.extend 関数を抽出し、関数名を変更します:

コードをコピーします コードは次のとおりです:
MyMath.extend = function(){
// ターゲット オブジェクトへの参照をコピー
var target = argument[0] ||
{}、i = 1、length = 引数。 length, deep = false, options;
// ディープコピー状況を処理します
if (typeof target === "boolean") {
deep = target = argument[1] | |
{} ;
// ブール値とターゲットをスキップします
i = 2;
}
// ターゲットが文字列またはその他の場合の処理​​ (ディープコピーで可能)
if (typeof target !== "object" && !jQuery.isFunction(target))
target = {}
// 引数が 1 つだけ渡された場合、jQuery 自体を拡張します
if (length = = i) {
target = this;
--i;
for (; i // 非 null/未定義の値のみを処理します
if ((options = argument[i]) != null)
// 基本オブジェクトを拡張します
for (var name in options) {
var src = target[name], copy = options[name];
// 終わりのないループを防止します
if (target === copy)
continue
// オブジェクトの値をマージする場合は再帰します
if (deep && copy && typeof copy == = "object" && !copy.nodeType)
target[name] = jQuery.extend(deep, // 元のオブジェクトは決して移動せず、クローンを作成します
src || ( copy.length != null ? [] : {}), copy);
else
if (copy !== unknown)
target [name] = copy;
}
// 変更されたオブジェクトを返します
return target;


次に、この extend メソッドを使用してメソッドを追加します (乗算、除算):



コードをコピー
コードは次のとおりです。 MyMath.extend( { Mul: function(a, b){ return a * b;
Div: function(a, b){
return a / b;
});


この構造は一目瞭然です。
転載元に注意してください:

http://www.cnblogs.com/wbkt2t

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート