From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- .../global_objects/function/call/index.html | 219 +++++++++++++++++++++ .../reference/global_objects/function/index.html | 183 +++++++++++++++++ 2 files changed, 402 insertions(+) create mode 100644 files/ar/web/javascript/reference/global_objects/function/call/index.html create mode 100644 files/ar/web/javascript/reference/global_objects/function/index.html (limited to 'files/ar/web/javascript/reference/global_objects/function') diff --git a/files/ar/web/javascript/reference/global_objects/function/call/index.html b/files/ar/web/javascript/reference/global_objects/function/call/index.html new file mode 100644 index 0000000000..f3c83f04ac --- /dev/null +++ b/files/ar/web/javascript/reference/global_objects/function/call/index.html @@ -0,0 +1,219 @@ +--- +title: ()Function.prototype.call +slug: Web/JavaScript/Reference/Global_Objects/Function/call +translation_of: Web/JavaScript/Reference/Global_Objects/Function/call +--- +
{{JSRef}}
+ +
+

تُستدعَى الوظيفة ()call على دالة، أول argument لهذه الوظيفة هو قيمة this الخاصة بالدالة، وال arguments المتبقية (إن وُجدت)، هي  arguments الدالة.

+ +
+

ملاحظة :   صيغة هذه الوظيفة مماثلة تقريبًا  للصيغة الخاصة بـ {{jsxref("Function.prototype.apply", "apply")}} الفرق الوحيد هو ان  ()call تاخذ قائمة من ال arguments  محددة بشكل فردي فيما تاخذ ()apply مصفوفة واحدة من ال arguments.

+
+ +
{{EmbedInteractiveExample("pages/js/function-call.html")}}
+ + + +

صيغة الوظيفة call

+ +
function.call(thisArg, arg1, arg2, ...)
+ +

Parameters

+ +
+
thisArg
+
اختياري. وهو قيمة this المتوفرة في استدعاء الدالة function. لاحظ أن this قد لا تكون القيمة الفعلية التي تراها الوظيفة: اذا كانت هذه الوظيفة دالة في  {{jsxref("Strict_mode", "non-strict mode", "", 1)}} سيتم استبدال  {{jsxref("Global_Objects/null", "null")}} و {{jsxref("Global_Objects/undefined", "undefined")}} بالكائن العام والقيم الاولية ستحول الى كائنات.  
+
...,arg1, arg2
+
 arguments الدالة function.
+
+ +

Return value

+ +

تُرجع نتيجة استدعاء الدالة مع قيمة  this المحددة و ال arguments.

+ +

وصف

+ +

تسمح الوظيفة ()call لدالة او وظيفة خاصة بكائن واحد بان يتم استدعاؤها وتعيينها من قبل كائن مختلف.

+ +

تمنح الوظيفة ()call قيمة this الجديدة الى الدالة/الوظيفة. مع الـ call  يمكنك كتابة الوظيفة مرة واحدة ومن ثم تقوم بتوريثها لكائن آخر دون الحاجة إلى إعادة كتابة الوظيفة للكائن الجديد.

+ +

تحليل الجزء الغامض في الوظيفة ()call

+ +

نظرا لعدم وجود شرح كاف حول هذه الجزئية فقد ارتايت ان اظيف هذه الفقرة التوضيحية لعلها تزيح بعض الغموض عن قيمة ال this التي تمثل ال argument الاول لهذه الوظيفة.

+ +

اذا نظرنا بتمعن في هذا الجزء من داخل الوظيفة call. سنجد ان thisArg ستساوي الكائن العام في حالة undefined او null، والا ستساوي ناتج الكائن Object، تساوي thisArg كائنا في كلتا الحالتين. وعليه فقد اصبحت كائنا، اذن فمن الطبيعي ان تمتلك خصائص. تم تحديد الخاصية _callTemp_ قيمتها this و this تمثل الدالة التي ستستدعى عليها الوظيفة call. واخيرا يتم تنفيذ هذه الدالة:

+ +
Function.prototype.call_like = function( thisArg, args ){
+    thisArg = ( thisArg === undefined || thisArg === null ) ? window : Object( thisArg );
+    thisArg._callTemp_ = this;
+    thisArg._callTemp_();
+}
+ +

في حالة عدم وجود thisArg ستتصرف الدالة fn بشكل طبيعي و this ستساوي الكائن العام:

+ +
var fn = function () {
+    console.log( this ); // [object Window]
+}
+fn.call_like();
+
+
+ +

في حالة وجود thisArg بقيمة اولية ك undefined او null ف this ستساوي ايضا الكائن العام، خلاف ذالك سيتم تمرير قيمتها الى الكائن ()Object، اذا كانت هذه القيمة من القيم الاولية-primitive value سيقوم الكائن بتحويلها الى الكائن المناسب لها، واما اذا كانت هذه القيمة كائنا فلا حاجة لتحويلها و this ستساوي كائنا.

+ +

وهذا يفسر كيف قام الكائن Object بتحويل القيمة الاولية "Youssef belmeskine" الى الكائن String:   

+ +
var fn = function () {
+    console.log( this ); // "Youssef belmeskine"
+    console.log( this === "Youssef belmeskine" ); // false
+    console.log( String(this) === "Youssef belmeskine" ); // true
+}
+fn.call_like( "Youssef belmeskine" );
+
+
+ +

من المهم دائما ذكر المصدر:

+ +
+

بالنسبة لى شخصيا لم اتمكن من فهم هذه الوظيفة وشقيقتها apply بشكل واضح الا عندما قمت بالاطلاع على الكود الداخلى لها. قمت باستخدام هذا الجزء من الكود لتوضيح الفكرة فقط. ستجد ال Polyfill كاملا في هذا الموقع hexmen.com.

+
+ +

أمثلة

+ +

استخدام ال call لِسَلسَلة منشئات الكائن

+ +

تستطيع إستخدام call  لعمل تسلسل لمنشئات-constructors الكائن، وذلك على غرار جافا. في المثال التالي، تم تحديد منشئ الكائن Product مع اثنين من البارامترات name و price. والدالتات Food و Toy  تستدعيان  Product  ممرر لها this و name و price. تقوم Product بتهيئة الخاصيتان name و price فيما تقوم كلا الدالتان المتخصصتان بتحديد ال category.

+ +
function Product(name, price) {
+  this.name = name;
+  this.price = price;
+}
+
+function Food(name, price) {
+  Product.call(this, name, price);
+  this.category = 'food';
+}
+
+function Toy(name, price) {
+  Product.call(this, name, price);
+  this.category = 'toy';
+}
+
+var cheese = new Food('feta', 5);
+var fun = new Toy('robot', 40);
+
+ +

إستخدام ال call لإستدعاء الدالة المجهولة الاسم-anonymous function 

+ +

في هذا المثال قمنا بانشاء الدالة المجهولة واستخدمنا call  لإستدعاءها على كل كائن في المصفوفة. الغرض الرئيسي من الدالة المجهولة هو إضافة الدالة print الى كل كائن،  والتي ستكون قادرة على طباعة الفهرس الصحيح لكائنات المصفوفة. تمرير كائن على شكل قيمة this ليس ضروريًا، ولكن تم إنجازه لغرض توضيحي.

+ +
var animals = [
+  { species: 'Lion', name: 'King' },
+  { species: 'Whale', name: 'Fail' }
+];
+
+for (var i = 0; i < animals.length; i++) {
+  (function(i) {
+    this.print = function() {
+      console.log('#' + i + ' ' + this.species
+                  + ': ' + this.name);
+    }
+    this.print();
+  }).call(animals[i], i);
+}
+
+ +

استخدام call لاستدعاء دالة وتحديد السياق-context ل   this

+ +

في المثال أدناه، عندما سنقوم باستدعاء greet سترتبط قيمة this  بالكائن obj.

+ +
function greet() {
+  var reply = [this.animal, 'typically sleep between', this.sleepDuration].join(' ');
+  console.log(reply);
+}
+
+var obj = {
+  animal: 'cats', sleepDuration: '12 and 16 hours'
+};
+
+greet.call(obj);  // cats typically sleep between 12 and 16 hours
+
+ +

إستخدام الـcall لاستدعاء دالة وبدون تحديد البرامتر الاول

+ +

في المثال أدناه ،قمنا باستدعاء الدالة display من دون تمرير البرامتر الاول. إذا لم يتم تمرير قيمة this في البرامتر الاول فسترتبط بالكائن العام-global object.

+
+ +
var sData = 'Wisen';
+
+function display(){
+  console.log('sData value is %s ', this.sData);
+}
+
+display.call();  // sData value is Wisen
+
+ +
+

تذكر ان قيمة this ستكون  ب undefined في الوضع الصارم. انظر ادناه:

+
+ +
'use strict';
+
+var sData = 'Wisen';
+
+function display() {
+  console.log('sData value is %s ', this.sData);
+}
+
+display.call(); // Cannot read the property of 'sData' of undefined
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.3.
{{SpecName('ES5.1', '#sec-15.3.4.4', 'Function.prototype.call')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-function.prototype.call', 'Function.prototype.call')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-function.prototype.call', 'Function.prototype.call')}}{{Spec2('ESDraft')}}
+ +

Browser compatibility

+ + + +

{{Compat("javascript.builtins.Function.call")}}

+ +

See also

+ + diff --git a/files/ar/web/javascript/reference/global_objects/function/index.html b/files/ar/web/javascript/reference/global_objects/function/index.html new file mode 100644 index 0000000000..878d8776b3 --- /dev/null +++ b/files/ar/web/javascript/reference/global_objects/function/index.html @@ -0,0 +1,183 @@ +--- +title: Function +slug: Web/JavaScript/Reference/Global_Objects/Function +tags: + - Constructor + - Function + - JavaScript + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Function +--- +
{{JSRef}}
+ +

The Function constructor creates a new Function object. Calling the constructor directly can create functions dynamically, but suffers from security and similar (but far less significant) performance issues similar to {{jsxref("eval")}}. However, unlike eval, the Function constructor allows executing code in the global scope, prompting better programming habits and allower for more efficient code minification.

+ +
{{EmbedInteractiveExample("pages/js/function-constructor.html")}}
+ + + +

Every JavaScript function is actually a Function object. This can be seen with the code (function(){}).constructor === Function which returns true.

+ +

Syntax

+ +
new Function ([arg1[, arg2[, ...argN]],] functionBody)
+ +

Parameters

+ +
+
arg1, arg2, ... argN
+
Names to be used by the function as formal argument names. Each must be a string that corresponds to a valid JavaScript identifier or a list of such strings separated with a comma; for example "x", "theValue", or "a,b".
+
functionBody
+
A string containing the JavaScript statements comprising the function definition.
+
+ +

Description

+ +

Function objects created with the Function constructor are parsed when the function is created. This is less efficient than declaring a function with a function expression or function statement and calling it within your code because such functions are parsed with the rest of the code.

+ +

All arguments passed to the function are treated as the names of the identifiers of the parameters in the function to be created, in the order in which they are passed.

+ +

Invoking the Function constructor as a function (without using the new operator) has the same effect as invoking it as a constructor. However, getting rid of the new operator allows for a smaller minified code size (4 bytes smaller), so it is best to not use new with Function.

+ +

Properties and Methods of Function

+ +

The global Function object has no methods or properties of its own. However, since it is a function itself, it does inherit some methods and properties through the prototype chain from {{jsxref("Function.prototype")}}.

+ +

Function prototype object

+ +

Properties

+ +
{{page('/en-US/docs/JavaScript/Reference/Global_Objects/Function/prototype', 'Properties')}}
+ +

Methods

+ +
{{page('/en-US/docs/JavaScript/Reference/Global_Objects/Function/prototype', 'Methods')}}
+ +

Function instances

+ +

Function instances inherit methods and properties from {{jsxref("Function.prototype")}}. As with all constructors, you can change the constructor's prototype object to make changes to all Function instances.

+ +

Examples

+ +

Specifying arguments with the Function constructor

+ +

The following code creates a Function object that takes two arguments.

+ +
// Example can be run directly in your JavaScript console
+
+// Create a function that takes two arguments and returns the sum of those arguments
+var adder = new Function('a', 'b', 'return a + b');
+
+// Call the function
+adder(2, 6);
+// > 8
+
+ +

The arguments "a" and "b" are formal argument names that are used in the function body, "return a + b".

+ +

Difference between Function constructor and function declaration

+ +

Functions created with the Function constructor do not create closures to their creation contexts; they always are created in the global scope. When running them, they will only be able to access their own local variables and global ones, not the ones from the scope in which the Function constructor was called. This is different from using {{jsxref("eval")}} with code for a function expression.

+ +
var x = 10;
+
+function createFunction1() {
+    var x = 20;
+    return new Function('return x;'); // this |x| refers global |x|
+}
+
+function createFunction2() {
+    var x = 20;
+    function f() {
+        return x; // this |x| refers local |x| above
+    }
+    return f;
+}
+
+var f1 = createFunction1();
+console.log(f1());          // 10
+var f2 = createFunction2();
+console.log(f2());          // 20
+
+ +

The "proper" way to execute external code with Function (for maximum minifyability).

+ +
function makeFunction(code){
+    return Function('"use strict";return ' + code)();
+}
+var add = makeFunction(
+  "" + function(a, b, c){ return a + b + c } // move this to a separate file in the production release
+);
+console.log( add(1, 2, 3) ); // will log six
+ +

Please note that the above code by itself is completely impractical. You should never abuse Function like that. Instead, the above code is meant only to be a simplified example of something like a module loader where there is a base script, then there are hundreads of big optionally loaded modules. Then, instead of the user waiting while they all download, the clients computer only downloads modules as needed so the page loads super fast. Also, it is reccomended that when evaluating many functions, the functions are evaluated together in bulk instead of separatly.

+ +
function bulkMakeFunctions(){
+    var str = "", i = 1, Len = arguments.length;
+    if (Len) {
+        str = arguments[0];
+        while (i !== Len) str += "," + arguments[i], ++i;
+    }
+    return Function('"use strict";return[' + str + ']')();
+}
+const [
+    add,                        sub,                        mul,                        div
+] = bulkMakeFunctions(
+    "function(a,b){return a+b}","function(a,b){return a-b}","function(a,b){return a*b}","function(a,b){return a/b}"
+);
+console.log(sub(add(mul(4,3), div(225,5)), 7))
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.3', 'Function')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-function-objects', 'Function')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-function-objects', 'Function')}}{{Spec2('ESDraft')}} 
+ +

Browser compatibility

+ +
+ + +

{{Compat("javascript.builtins.Function")}}

+
+ +

See also

+ + -- cgit v1.2.3-54-g00ecf