ජාවාස්ක්රිප්ට් this
සරල ශ්‍රිත ආයාචනය
පහත සඳහන් කාර්යය සලකා බලන්න:
function foo() {
console.log("bar");
console.log(this);
}
foo(); // calling the function
අපි මෙය සාමාන්‍ය ප්‍රකාරයේදී ක්රියාත්මක කරන බව සලකන්න, එනම් දැඩි ප්රකාරය භාවිතා නොවේ.
බ්‍රව්සරයක ධාවනය වන විට, එහි අගය මෙසේ thisසටහන් වේ window. එයට හේතුව windowවෙබ් බ්‍රව්සරයේ විෂය පථයේ ගෝලීය විචල්‍යයයි.
ඔබ මෙම කේතයම node.js වැනි පරිසරයක ධාවනය කරන්නේ නම්, thisඔබගේ යෙදුමේ ගෝලීය විචල්‍යය වෙත යොමු වේ.
දැන් අපි මෙය "use strict";ශ්‍රිත ප්‍රකාශයේ ආරම්භයට ප්‍රකාශය එකතු කරමින් දැඩි ආකාරයකින් ක්රියාත්මක කරන්නේ නම් , thisතවදුරටත් පරිසර දෙකෙහිම ගෝලීය විචල්‍යය වෙත යොමු නොවනු ඇත. දැඩි ආකාරයකින් ව්‍යාකූලතා වළක්වා ගැනීම සඳහා මෙය සිදු කෙරේ. thisමේ අවස්ථාවේ දී පමණක් ලොග් වනු ඇත undefined, මන්ද එය එයයි, එය අර්ථ දක්වා නැත.
පහත දැක්වෙන අවස්ථා වලදී, වටිනාකම හැසිරවිය යුතු ආකාරය අපි බලමු this.
වස්තුවක් මත ශ්රිතයක් කැඳවීම
මෙය කිරීමට විවිධ ක්රම තිබේ. ඔබ ජාවාස්ක්රිප්ට් හි ස්වදේශික ක්‍රමවේදයන් කැඳවා තිබේ නම් forEachසහ එම අවස්ථාවෙහි විචල්‍යය ඔබ එම ශ්රිතය හැඳින්වූ ආකාරය වෙත යොමු වන බව sliceඔබ දැනටමත් දැන සිටිය යුතුය (ජාවාස්ක්රිප්ට් හි සෑම දෙයක්ම s හා s ද ඇතුළුව ). උදාහරණයක් ලෙස පහත කේතය ගන්න.thisObjectObjectArrayFunction
var myObj = {key: "Obj"};
myObj.logThis = function () {
// I am a method
console.log(this);
}
myObj.logThis(); // myObj is logged
කිසියම් Objectදේපලක් ඇති දේපලක් තිබේ නම් Function, දේපල ක්රමයක් ලෙස හැඳින්වේ. මෙම ක්රමය, කැඳවූ විට, සෑම විටම එහි thisවිචල්ය විචල්‍යය Objectඑය සමඟ සම්බන්ධ වී ඇත. දැඩි හා දැඩි නොවන ක්රම සඳහා මෙය සත්‍ය වේ.
ක්රමයක් වෙනත් විචල්‍යයක ගබඩා කර තිබේ නම් (හෝ ඒ වෙනුවට, පිටපත් කර ඇත්නම්) නව විචල්‍යයේ සඳහන thisතවදුරටත් සුරැකෙන්නේ නැති බව සලකන්න . උදාහරණයක් වශයෙන්:
// continuing with the previous code snippet
var myVar = myObj.logThis;
myVar();
// logs either of window/global/undefined based on mode of operation
වඩාත් පොදු ප්‍රායෝගික අවස්ථාවක් සලකා බලමින්:
var el = document.getElementById('idOfEl');
el.addEventListener('click', function() { console.log(this) });
// the function called by addEventListener contains this as the reference to the element
// so clicking on our element would log that element itself
මෙම newමූල පදය
ජාවාස්ක්රිප්ට් හි ඉදිකිරීම්කරු ශ්රිතයක් සලකා බලන්න:
function Person (name) {
this.name = name;
this.sayHello = function () {
console.log ("Hello", this);
}
}
var awal = new Person("Awal");
awal.sayHello();
// In `awal.sayHello`, `this` contains the reference to the variable `awal`
කොහොමද මේ වැඩ කරන්නේ? හොඳයි, අපි newමූලික පදය භාවිතා කරන විට කුමක් සිදුවේ දැයි බලමු .
newමූල පදය සමඟ ශ්රිතය ඇමතීමෙන් වහාම Objectවර්ගයක් ආරම්භ වේ Person.- මෙහි ඉදිකිරීම්කරුට
Objectඑහි ඉදිකිරීම්කරු සකසා ඇත Person. එසේම, typeof awalඑය නැවත පැමිණෙන බව සලකන්න Object.
- මෙම
Objectනවයට මූලාකෘතිය පවරනු ලැබේ Person.prototype. මෙයින් අදහස් කරන්නේ Personමූලාකෘතියේ ඇති ඕනෑම ක්රමයක් හෝ දේපලක් Personඇතුළුව සියලු අවස්ථාවන් සඳහා ලබා ගත හැකි බවයි awal.
- ශ්රිතය
Personදැන්ම ක්රියාත්මක වේ; thisඅලුතින් ඉදිකරන ලද වස්තුව පිළිබඳ සඳහනක් වීම awal.
හරිම සරලයි නේද?
නිල ECMAScript පිරිවිතරයේ එවැනි ආකාරයේ ශ්‍රිත සත්‍ය constructorශ්‍රිත බව කොතැනකවත් සඳහන් නොවන බව සලකන්න . ඒවා සාමාන්‍ය කාර්යයන් පමණක් newවන අතර ඕනෑම ශ්රිතයක් සඳහා භාවිතා කළ හැකිය. එය අප ඒවා ලෙස භාවිතා කිරීම පමණක් වන අතර, එබැවින් අපි ඒවා හඳුන්වන්නේ එවැනි අය ලෙස පමණි.
කාර්යයන් මත ඇමතුම් කාර්යයන්: callසහapply
ඔව්, functions ද Objects(සහ ඇත්ත වශයෙන්ම ජාවාස්ක්රිප්ට් හි පළමු පන්තියේ විචල්යයන්) බැවින්, ශ්‍රිතවලට පවා ක්රම තිබේ ... හොඳයි, ඒවාම ක්රියාත්මක වේ.
සියලු ම කටයුතු ගෝලීය සිට උරුම Function, සහ එහි බොහෝ ක්රම දෙකක් callසහ apply, දෙකම වටිනාකම හැසිරවීමට යොදා ගත හැකි thisඒවා ලෙස හැඳින්වේ කරන උත්සවයට.
function foo () { console.log (this, arguments); }
var thisArg = {myObj: "is cool"};
foo.call(thisArg, 1, 2, 3);
මෙය භාවිතා කිරීම සඳහා සාමාන්‍ය උදාහරණයකි call. එය මූලික වශයෙන් පළමු පරාමිතිය thisගෙන ශ්රිතය fooතුළ යොමු කිරීමක් ලෙස සකසයි thisArg. වෙත callසම්මත කරන ලද අනෙකුත් සියලුම පරාමිතීන් ශ්‍රිතයට fooතර්ක ලෙස ලබා දෙනු ලැබේ.
එබැවින් ඉහත කේතය {myObj: "is cool"}, [1, 2, 3]කොන්සෝලය තුළට පිවිසෙනු ඇත . thisඕනෑම ශ්‍රිතයක වටිනාකම වෙනස් කිරීමට ඉතා හොඳ ක්රමයක් .
applycallඑය පරාමිති දෙකක් පමණක් බව පිළිගැනීමට බොහෝ දුරට සමාන වේ: thisArgසහ ශ්‍රිතයට යැවිය යුතු තර්ක අඩංගු අරාව. එබැවින් ඉහත callඇමතුම මේ ආකාරයට පරිවර්තනය කළ හැකිය apply:
foo.apply(thisArg, [1,2,3])
බව සටහන callහා applyවටිනාකම පරයා thisඅප දෙවන වෙඩි සාකච්ඡා තිතක් ක්රමය යාදින්න මඟින් කට්ටලයක්. සරලයි :)
ඉදිරිපත් කිරීම .... bind!
bindcallසහ සහෝදරයෙක් apply. එය Functionජාවාස්ක්රිප්ට් හි ගෝලීය ඉදිකිරීම්කරු වෙතින් සියලු කාර්යයන් මගින් උරුම කරගත් ක්‍රමයකි . bindසහ call/ අතර ඇති වෙනස applyදෙකම callසහ applyඇත්ත වශයෙන්ම ශ්‍රිතයට ආයාචනා කරනු ඇත. bind, අනෙක් අතට, thisArgසහ argumentsපෙර සැකසුම සමඟ නව ශ්රිතයක් ලබා දෙයි . මෙය වඩා හොඳින් තේරුම් ගැනීමට උදාහරණයක් ගනිමු:
function foo (a, b) {
console.log (this, arguments);
}
var thisArg = {myObj: "even more cool now"};
var bound = foo.bind(thisArg, 1, 2);
console.log (typeof bound); // logs `function`
console.log (bound);
/* logs `function () { native code }` */
bound(); // calling the function returned by `.bind`
// logs `{myObj: "even more cool now"}, [1, 2]`
තිදෙනා අතර වෙනස බලන්න? එය සියුම් ය, නමුත් ඒවා වෙනස් ලෙස භාවිතා වේ. තිත්-ක්රම ආයාචනය මඟින් කට්ටලයේ වටිනාකම මෙන්, callසහ apply, bindඅධික ලෙස ධාවනය කරනු ඇත this.
මෙම ශ්‍රිත තුනෙන් එකක්වත් මුල් ශ්‍රිතයට කිසිදු වෙනසක් නොකරන බව සලකන්න. callසහ applyනැවුම් ලෙස සාදන ලද ශ්‍රිතයන්ගෙන් වටිනාකම ආපසු ලබා දෙන අතර, නැවුම් ලෙස ඉදිකරන ලද ශ්රිතය bindනැවත කැඳවනු ඇත.
අමතර දේවල්, මෙය පිටපත් කරන්න
සමහර විට, thisවිෂය පථය, විශේෂයෙන් කැදැලි විෂය පථය සමඟ වෙනස් වන කාරණයට ඔබ කැමති නැත . පහත උදාහරණය දෙස බලන්න.
var myObj = {
hello: function () {
return "world"
},
myMethod: function () {
// copy this, variable names are case-sensitive
var that = this;
// callbacks ftw \o/
foo.bar("args", function () {
// I want to call `hello` here
this.hello(); // error
// but `this` references to `foo` damn!
// oh wait we have a backup \o/
that.hello(); // "world"
});
}
};
ඉහත කේතය තුළ, thisකැදැලි විෂය පථය සමඟ වෙනස් වීමේ වටිනාකම අපට පෙනේ , නමුත් අපට අවශ්‍ය වූයේ thisමුල් විෂය පථයෙන් වටිනාකමයි . ඒ නිසා අපි ඒ වෙනුවට 'පිටපත්' thisකර thatපිටපත භාවිතා කළෙමු this. දක්ෂයි නේද?
දර්ශකය:
thisපෙරනිමියෙන් පවත්වන්නේ කුමක්ද?- අපි ශ්රිතය Object-dot අංකනය සහිත ක්රමයක් ලෙස හැඳින්වුවහොත් කුමක් කළ යුතුද?
- අපි
newමූලික පදය භාවිතා කරන්නේ නම් කුමක් කළ යුතුද ?
- අපි කොහොමද හැසිරවීමට නැහැ
thisසමග callහා apply?
- භාවිතා කිරීම
bind.
thisකැදැලි-විෂය පථයේ ගැටළු විසඳීම සඳහා පිටපත් කිරීම .
