1。これは、コンストラクターインスタンス化オブジェクトを指します
前の記事では、次の例に示すように、新しいコンストラクターを使用することと呼び出さないコンストラクターの違いについて言及しました。
コードコピーは次のとおりです。
関数Benjamin(ユーザー名、セックス){
this.username = username;
this.sex = sex;
}
var Benjamin = new Benjamin( "Zuojj"、 "Male");
// outputs:benjamin {sex: "Male"、username: "zuojj"}
console.log(ベンジャミン);
Var Ben = Benjamin( "Zhangsan"、 "Female");
//出力:未定義
console.log(ben);
コンストラクターが通常の関数と呼ばれると、値は返されず、これはグローバルオブジェクトを指します。それでは、新しいキーワードの欠如によって引き起こされる問題をどのように回避できますか?
コードコピーは次のとおりです。
関数Benjamin(ユーザー名、セックス){
//「これ」が「ベンジャミン」オブジェクトであるかどうかを確認します
if(このインスタンスのベンジャミン){
this.username = username;
this.sex = sex;
}それ以外 {
新しいベンジャミン(ユーザー名、セックス)を返します。
}
}
var Benjamin = new Benjamin( "Zuojj"、 "Male");
// outputs:benjamin {sex: "Male"、username: "zuojj"}
console.log(ベンジャミン);
Var Ben = Benjamin( "Zhangsan"、 "Female");
// outputs:benjamin {username: "zhangsan"、sex: "female"}
console.log(ben);
上記の例では、最初にこれがベンジャミンのインスタンスであるかどうかを確認しますが、そうでない場合は、コンストラクターを自動的に呼び出してインスタンス化するために新しいものを使用します。つまり、新しいキーワードインスタンス化コンストラクターの欠落を心配する必要がなくなります。もちろん、このように悪い習慣を身につけるかもしれません。この現象を避けた場合はどうなりますか?このようなエラーを投げることができます:
コードコピーは次のとおりです。
関数Benjamin(ユーザー名、セックス){
//「これ」が「ベンジャミン」オブジェクトであるかどうかを確認します
if(このインスタンスのベンジャミン){
this.username = username;
this.sex = sex;
}それ以外 {
//そうでない場合は、エラーをスローします。
新しいエラーをスローします(「new」なしで呼び出された「ベンジャミン」);
}
}
2。これは、関数を呼び出すオブジェクトを指します
次の例を参照してください。
コードコピーは次のとおりです。
var x = 10;
var obj = {
X:10、
出力:function(){
//出力:true
console.log(this === obj);
this.xを返します。
}、
internobj:{
X:30、
出力:function(){
//出力:true
console.log(this === obj.innerobj);
this.xを返します。
}
}
};
//出力:10
console.log(obj.output());
//出力:30
console.log(obj.innerobj.output());
3。これはグローバルオブジェクトを指します
上記のコンストラクターについて議論するとき、新しいものが適用されない場合、これがグローバルオブジェクトを指していることも議論しました。エラーが発生しやすい2つの一般的な例を見てみましょう。
コードコピーは次のとおりです。
var x = 100;
var obj = {
X:10、
出力:function(){
(関数() {
//出力:true
console.log(this ===ウィンドウ);
//出力:内側:100
console.log( "inner:" + this.x);
})();
this.xを返します。
}
};
//出力:10
console.log(obj.output());
閉鎖を使用すると、スコープが変更され、これはウィンドウ(ブラウザ内)を指します。
コードコピーは次のとおりです。
var x = 100;
var obj = {
X:10、
出力:function(){
this.xを返します。
}
};
var output = obj.output;
//出力:10
console.log(obj.output());
//出力:100
console.log(output());
var obj2 = {
X:30、
出力:obj.output
}
//出力:30
console.log(obj2.output());
この時点で、これは常に関数呼び出しの時点でオブジェクトを指しています。
4.これは、apply/call()メソッドによって割り当てられたオブジェクトを指します
コードコピーは次のとおりです。
var x = 100;
var obj = {
X:10、
出力:function(){
this.xを返します。
}
};
//出力:10
console.log(obj.output());
var obj2 = {
X:40、
出力:obj.output
}
//出力:40
console.log(obj.output.call(obj2));
//出力:10
console.log(obj2.output.apply(obj));
5。コールバック関数のこれは、コールバックを呼び出すこの関数によって指されたオブジェクトを指します。
コードコピーは次のとおりです。
// <入力タイプ= "text" value = "3" id = "txt_username">
$( "#username")。on( "click"、function(){
console.log(this.value);
});
6。これはfunction.prototype.bindで
bind()メソッドは、呼び出されると、このキーワードが提供された値に設定され、新しい関数が呼び出されたときに提供された任意の任意の任意に先行する新しい関数を作成します。
例1:
コードコピーは次のとおりです。
function person(){
this.nameを返します。
}
//function.prototype.bind
var per = person.bind({
名前:「Zuojj」
});
console.log(per);
var obj = {
名前:「ベン」、
人:人、
Per:Per
};
//出力:ベン、Zuojj
console.log(obj.person()、obj.per());
例2:
コードコピーは次のとおりです。
this.x = 9;
var module = {
X:81、
getX:function(){return this.x; }
};
//出力:81
console.log(module.getx());
var getx = module.getx;
//出力:9、この場合、「この」はグローバルオブジェクトを指すため
console.log(getx);
//モジュールに「この」バインドされた新しい関数を作成します
var boundgetx = getX.bind(module);
//出力:81
console.log(boundgetx());