The specific conclusions can be found in "JavaScript dynamic this and dynamic binding instance code". This article focuses on designing a binding function without intrusion.
<script> window.name = "The Window object" function Scopetest () {return this.name}//Calling the function in Global Scope:scopetest ()//-> "The Window object" var foo = {name: "The foo object!", otherscopetest:function () {return this.name}} foo.otherscopetest ()//-> "the foo object!" </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Based on the principle of not extending the native object, the Bind function (DOM is scoped) is used, which is similar to the bind of the prototype framework.
Copy Code code as follows:
Dom.bind = function (fn,context) {
Second argument if you like, you can also change to Thisobject,scope,
In short, is a new scope object
if (Arguments.length < 2 && context===undefined) return fn;
var method = FN,
Slice = Array.prototype.slice,
args = Slice.call (arguments, 2);
return function () {///The parameter of the original FN is passed here
var array = slice.call (arguments, 0);
Method.apply (Context,args.concat (array))
}
Usage: The first parameter is a function that needs to bind the scope, the second is window or various objects, and other parameters are arbitrary.
<textarea id="runcode15717"><script> dom = {}; Dom.bind = function (Fn,context) {if (Arguments.length < 2 && context===undefined) return fn; var method = fn, slice = Array.prototype.slice, args = Slice.call (arguments, 2); return function () {//Here is the parameter of the original FN, var array = slice.call (arguments, 0); Method.apply (Context,args.concat (Array)}} Window.name = ' This is window '; var JJ = {Name: ' This is JJ ', alertname:function () {//Binding failure alert (this.name); } }; var kk = {name: "kkです"} function run (f) {f (); Run (jj.alertname); var fx2 = dom.bind (JJ.ALERTNAME,JJ) run (FX2); var fx3 = dom.bind (Jj.alertname,window) run (FX3); var fx4 = dom.bind (JJ.ALERTNAME,KK) run (FX4); </script></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Another example:
<script> dom = {}; Dom.bind = function (Fn,context) {if (Arguments.length < 2 && context===undefined) return fn; var method = fn, slice = Array.prototype.slice, args = Slice.call (arguments, 2); return function () {//Here is the parameter of the original FN, var array = slice.call (arguments, 0); Method.apply (Context,args.concat (Array)}} var obj = {name: ' A nice demo ', Fx:function () {alert (this.name + ' \ n ' + Array.prototype.slice.call (arguments,0). Join (', ')); } }; var fx2 = Dom.bind (Obj.fx,obj, 1, 2, 3); FX2 (4, 5); Alerts the proper name, then "1, 2, 3, 4, 5" </script>
[ctrl+a All selected note: If you need to introduce external JS need to refresh to perform]
