نبذة عن الكائنات في Javascript

بدأه herch في 27 يناير 2011 · 8 رد · 2,063 مشاهدة · في قسم البرمجة بــ Javascript

#127 يناير 2011 في 00:34 صاحب الموضوع

الكائنات في Javascript

أول شيء يجب معرفته هو أنه لا وجود لمفهوم class في javascript، أي أننا لا نكتب أولا كلاس يكون بمثابة ال model، ثم ننشئ instances من هذه الكلاس. بل ننشئ مباشرة الكائنات.

كيفية إنشاء كائن:

هناك طريقتان لإنشاء كائن، إما باستعمال object literal أو باستعمال constructor function

object literal

عند إنشاء كائن باستعمال object literal، فإننا نقوم بتعريف الكائن، وتحديد خصائصه، وتهيئتها، ثم نعطي الكائن الناتج إلى متغير.

لنفترض الكود التالي

var aPerson = {
	name: "Issam",
	age: 100,
	speak: function(speech) {
		alert(speech);
	}
}

هنا حصلنا على كائن إسمه aPerson، يحتوي على 2 poperties هما name و age، و method هي speak.

كما هو واضح في الكود، فإننا نستعمل الفاصلة "," للتفريق بين خصائص الكائن. كما نستعمل النقطتين ":" بدل "=" لكي نحدد قيمة كل خاصبة.

لاسترجاع قيمة إحدى خصائص الكائن، name مثلا، نكتب إسم الكائن متبوعا بنقطة، ثم إسم ال property

var x = aPerson.name;

وننادي على الطريقة speak كالتالي

aPerson.speak("Javascript is great!!");

constructor function

هنا نقوم بكتابة function تكون بمثابة ال constructor، وعندما نريد إنشاء كائن، ننادي على هذه ال function باستعمال new

function Person(name, age) {
	this.name = name;
	this.age = age;
	this.speak = function(speech) {
		alert(name + " said " + speech);
	}
}

في المثال أعلاه، قمنا بكتابة constructor ينتظر 2 arguments، ثم ننشئ 2 properties ونعطيها قيمة ال arguments، ثم نضيف ال method speak. كل كائن ننشئه بهذا ال constructor سيحتوي على ال properties name & age، بالإضافة لل method speak، لأننا استعملنا this الذي يشير إلى الكائن الحالي الذي يتم إنشائه.

إنشاء كائن باستعمال ال constructor أعلاه يكون كالتالي:

var person1 = new Person("Issam", 100);
var person2 = new Person("herch", 100);

person1.speak();
person2.speak();

التعديل على هيكل الكائنات

في javascript يمكننا تعديل هيكل كائن ما حتى بعد إنشائه، بإضافة properties أو methods جديدة.

مثلا لو أردنا إضافة الخاصية profession إلى الكائن person1، يكفي عمل التالي

person1.profession = "Developer";

هذا التغيير سينطبق فقط على الكائن person1، أما person2 فما يزال على حالته.

#227 يناير 2011 في 01:36

جميل اخي عصام

ان سمحت لي ساضيف بعض النقاط

في الطريقة الاولى object literal

هي طريقة مجدية في انشاء namespace

ولكن لها سيئة ان كل المتغيرات بداخلها هي متغيرات عامة وهنا نقع بمشاكل التعديل على المتغيرات

الان في الطريقة الثانية

هي طريقة فعالة ومستخدمة في معظم المكتبات ميزتها انه يمكننا انشاء متغيرات محمية ومتغيرات عامة

الان كل ما ياتي بعد

function Person(name, age) { 
    	this.name = name; 
    	this.age = age; 
}

هنا المتغيرات الاسم والعمر هي متغيرات عامة

لاضافة متغيير محمي يكفي اضافة var قبل المتغيير

function Person(name, age) { 
 var x="";//private
    	this.name = name;  //public
    	this.age = age; //public
}

شكرا لك بجد موضوع مميز

ما رايك بالاكمال عن الكائنات

In bad state

#327 يناير 2011 في 02:28

أهلا وسهلا

لم أفهم ما تعنيه ب "متغيرات عامة"؟

حسب ما فهمته، فإن Javascript لها طريقة غريبة في التعامل مع ال scope، خصوصا بالنسبة ل this. فهي تساوي الكائن الجاري إنشائه في حال المناداة على ال "constructor" باستعمال new، وبالتالي فالمتغيرات خاصة بالكائن الحالي فقط... لكن إذا لم نستعمل new ففي هذه الحالة this هي ال global object والذي يكون window عادة، وفي هذه الحالة فإن المتغيرات داخل ال "constructor" ستكون global

أرجو التصحيح إذا كنت مخطئ

اقتباس
ما رايك بالاكمال عن الكائنات

إن شاء الله، بعد ما أفهمها جيدا

#427 يناير 2011 في 03:09

قصدت متغيرات عامة public variable

تمام انا قصدي انه تابع للاب المنشىء له ولكن يمكن رؤيته والتعامل معه

اما لو تم انشاء متغير ب var

فانه لا يمكن الوصول اليه ونحن بحاجة الى تابع عام(public) يقوم باخذ القيمة وتابع اخر يقوم باعطاءه قيمة طبعا الان مع المسستعرضات الحديثة اصبح هناك طريقة لعمل ذلك

In bad state

#527 يناير 2011 في 10:43

هناك طريقة أخرى تستعمل لجعل بعض المتغيرات private داخل object، لا أدري إذا كانت جيدة أو لا... وذلك بكتابتها داخل function والمناداة عليها مباشرة، على الشكل التالي

{
    function() {
    //some private stuff
    }();
}

كل ما سيتم إنشائه داخل ال function يبقى مرئيا داخلها فقط.

اقتباس
فانه لا يمكن الوصول اليه ونحن بحاجة الى تابع عام(public) يقوم باخذ القيمة وتابع اخر يقوم باعطاءه قيمة طبعا الان مع المسستعرضات الحديثة اصبح هناك طريقة لعمل ذلك

ما هي هذه الطريقة :wub:

تم تعديل هذه المشاركة بواسطة herch في 27 يناير 2011 في 10:44

#627 يناير 2011 في 22:22

كان سابقا يتم حماية متغير عبر العبارة var ويتم جلب قيمتها عبر طريقة عامة تقوم باعادة قيمة المتغيير المحمي

كذلك يتم اعطاؤها قيمة عبر طريقة عامة

مثال

function employee(id,name)
{
var salary;
this.id=id;
this.name=name;
this.getsalary=function(){return salary;}
this.setsalary=function(sal){salary=sal;}
}
var emp1=new employee(10,"mohammad");
emp1.setsalary(100);
alert(emp1.getsalary());

كذلك يمكننا ان نقوم بانشاء طريقة كاملا مخفية مثلا

function employee(id,name)
{
var salary;
var com;
this.id=id;
this.name=name;
this.getsalary=function(){return salary;}
this.setsalary=function(sal){salary=sal;}
  var  commission=function(){
   if(salary<10000)
   {
   com=salary*0.1;
   }
   else if(salary>10000 && salary <20000)
   {
   com=salary*0.2;
   }
   return com;
  }
this.getcommission=function(){return commission();}
}
var emp1=new employee(10,"mohammad");
emp1.setsalary(15000);
alert(emp1.getsalary());
alert(emp1.getcommission());

ملاحظة صغيرة

لا يجب ان نقول كالتالي

function employee(id,name)
{
var salary;
var com;
this.id=id;
this.name=name;
this.getsalary=function(){return salary;}
this.setsalary=function(sal){salary=sal;}
  var  commission=function(){
   if(salary<10000)
   {
   com=salary*0.1;
   }
   else if(salary>10000 && salary <20000)
   {
   com=salary*0.2;
   }
   return com;
  }
this.getcommission=function(){return commission();}
}
var emp1=new employee(10,"mohammad");
emp1.setsalary(15000);
alert(emp1.getsalary());
alert(emp1.getcommission());
emp1.salary=10; 
alert(emp1.salary); //سؤال لم هنا تعرض عشرة

مع ان المتغير محمي

الجواب لنجرب ما يلي :

  function employee(id,name)
{
var salary;
var com;
this.id=id;
this.name=name;
this.getsalary=function(){return salary;}
this.setsalary=function(sal){salary=sal;}
  var  commission=function(){
   if(salary<10000)
   {
   com=salary*0.1;
   }
   else if(salary>10000 && salary <20000)
   {
   com=salary*0.2;
   }
   return com;
  }
this.getcommission=function(){return commission();}
}
var emp1=new employee(10,"mohammad");
emp1.setsalary(15000);
alert(emp1.getsalary());
alert(emp1.getcommission());
emp1.salary=5;
alert(emp1.salary); //construcotrالفكرة انه هنا يتم اضافة المتغير بشكل مباشر الى الغرض وهذا غير ذاك الموجود ضمن ال 
alert(emp1.getsalary());

نستخدم __defineGetter__ للحصول على قيمة متغيير محمي

نستخدم __defineSetter__ لوضع قيمة لمتغيير محمي

function employee(id,name)
{
var salary;
var com;
this.id=id;
this.name=name;
this.__defineGetter__("salary",function(){
    	return salary;
});
	this.__defineSetter__("salary",function(sal){
    	salary= sal;
	});
var  commission=function(){
   if(salary<10000)
   {
   com=salary*0.1;
   }
   else if(salary>10000 && salary <20000)
   {
   com=salary*0.2;
   }
   return com;
  }
this.__defineGetter__("com",function(){
    	return commission();
});
}

var emp1=new employee(10,"mohammad");
emp1.salary=15000;
alert(emp1.salary);
alert(emp1.com);

اما ان كنا نستخدم طريقة ال Object litral

function Field(val){
	this.value = val;
} 

Field.prototype = {
	get value(){
    	return this._value;
	},
	set value(val){
    	this._value = val;
	}
};

الان هذه الطريقة تعمل

Firefox since at least 1.5

other Mozilla stuff using SpiderMonkey since at least 2005

Opera 9.5

Safari 3

IE8 after RC1

Rhino 1.6R6

JScript.NET 8.

من اجل Ie7 and 6

function getset(){
var cheesecake = {}
Object.defineProperty(cheesecake, "description", {
get : function () {
return this.desc + " and stuff added because of the awesome getter";
},
set : function (val) {
this.desc = val + " stuff added for setter ";
}
});
cheesecake.description = "Absolutely delicious";
alert(cheesecake.description);
}
var sg=new getset();

لم اجربها صراحة  لكنها تعمل على الموزيلا

للاستزادة

http://antimatter15....rs-and-setters/

http://ejohn.org/blo...rs-and-setters/

https://developer.mo...ers_and_Setters

http://ajaxian.com/a...s-in-javascript

In bad state