javascript_javascript スキルでのバインドの使用の概要
数日前にインタビューの質問を見たのですが、その質問は次のようなものでした:
JavaScript の apply、call、bind についての理解を教えてください。
まず、apply と call は決まり文句ですが、bind に関しては、イベントを DOM 要素にバインドするために使用される jquery でよく使われるメソッドなので、一瞬唖然としました。
この奇妙だがよく知られたバインドを理解するためにグーグルで調べたところ、このメソッドは JavaScript バージョン 1.8.5 でネイティブに実装されていることがわかりました。現在、IE9、ff4、および chrome7 はこのメソッドをサポートしていますが、opera と safari はサポートしていません。 (MDNでの説明)。
bind の機能は apply や call の機能と似ており、どちらも関数の実行コンテキストを変更します。これが実行時の this キーワードのポイントです。しかし、使い方は少し異なります。関数はバインドされた後、後で実行できます。
例は次のとおりです。
var person = {
名前: 'アンドリュー',
仕事: 'Web フロントエンド開発者',
性別: '男性',
sayHello: function() {
return 'こんにちは。私は ' this.name '、' this.job;
}
}
console.log(person.sayHello()); // こんにちは、Web フロントエンド開発者の Andrew です。 🎜>var anotherGuySayHello = person .sayHello.bind({
name:'Alex',
job: 'バックエンド C# 開発者'
}); // こんにちは、私は Alex です。バックエンド C# 開発者です
パラメーターを含む別の例:
var addMore = add.bind({}, 'a', 'b');
console.log(addMore('c', 'd')); // a b c d
このメソッドは現時点ではサポートされていませんが、MDN では非常に興味深い実装が提供されています。
throw new TypeError('Function.prototype.bind - バインドしようとしているものは呼び出し可能ではありません');
}
var fSlice = Array.prototype.slice,
aArgs = fSlice.call(arguments, 1),
fToBind = this,
fNOP = function() {},
fBound = function() {
return fToBind.apply (fNOP のインスタンス ? this : oThis || window, aArgs.concat(fSlice.call(arguments)));
fNOP.prototype = this.prototype;
fBound.prototype = new fNOP ();
return
}
コードの最後の数行はプロトタイプ チェーン。fBound はバインド関数を呼び出すサブクラスです。これはなぜでしょうか。実装については、実行時に決定される部分 fBound = function(){ return ... } を注意深く見てください。ここで考慮すべき点は、 new を使用して関数 (コンストラクター メソッド) を呼び出すかどうかです。
次の例は、説明の便宜上、MDN から直接引用したものです:
コードをコピー
};
var p = new Point(1, 2); ; / / 1,2
var emptyObj = {};
var YAxisPoint = point.bind(emptyObj, 0); ; / / 0, 5
axisPoint インスタンスオブポイント // true
理解を深めるために記事のリンクを最後に示します
MDN:
https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind
MSDN:
http://msdn.microsoft.com/en-us/library/ff841995(v=vs.94).aspx

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











JavaScript文字列置換法とFAQの詳細な説明 この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します:内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します 最も直接的な方法は、置換()メソッドを使用することです。 str = str.replace( "find"、 "置換"); この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace(/fi

楽なWebページレイアウトのためにjQueryを活用する:8本質的なプラグイン jQueryは、Webページのレイアウトを大幅に簡素化します。 この記事では、プロセスを合理化する8つの強力なjQueryプラグイン、特に手動のウェブサイトの作成に役立ちます

それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか? Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

このチュートリアルでは、Ajaxを介してロードされた動的なページボックスの作成を示しており、フルページのリロードなしでインスタントリフレッシュを可能にします。 JQueryとJavaScriptを活用します。カスタムのFacebookスタイルのコンテンツボックスローダーと考えてください。 重要な概念: ajaxとjquery

10の楽しいjQueryゲームプラグインして、あなたのウェブサイトをより魅力的にし、ユーザーの粘着性を高めます! Flashは依然としてカジュアルなWebゲームを開発するのに最適なソフトウェアですが、jQueryは驚くべき効果を生み出すこともできます。また、純粋なアクションフラッシュゲームに匹敵するものではありませんが、場合によってはブラウザで予期せぬ楽しみもできます。 jquery tic toeゲーム ゲームプログラミングの「Hello World」には、JQueryバージョンがあります。 ソースコード jQueryクレイジーワードコンポジションゲーム これは空白のゲームであり、単語の文脈を知らないために奇妙な結果を生み出すことができます。 ソースコード jquery鉱山の掃引ゲーム

このJavaScriptライブラリは、Cookieに依存せずにセッションデータを管理するためにWindow.nameプロパティを活用します。 ブラウザ全体でセッション変数を保存および取得するための堅牢なソリューションを提供します。 ライブラリは、セッションの3つのコア方法を提供します

このチュートリアルでは、jQueryを使用して魅惑的な視差の背景効果を作成する方法を示しています。 見事な視覚的な深さを作成するレイヤー画像を備えたヘッダーバナーを構築します。 更新されたプラグインは、jQuery 1.6.4以降で動作します。 ダウンロードしてください
