انتقل إلى المحتوى

٤.١٥ النماذج الأولية — الجزء الرابع

Object.create(proto)

التمرين 1: أنشئ كائنات كتب باستخدام باني، اعتمادًا على الكائن التالي.

/*
var book = {
  weight: null,
  pages: null
};
*/

function Book(w, p){
  this.weight = w;
  this.pages = p;
}

var book1 = new Book(0.5, 500);
var book2 = new Book(0.2, 200);
var book3 = new Book(0.7, 1000);

console.log(book1);
console.log(book2);
console.log(book3);

النتيجة كما يلي:

Book {weight: 0.5, pages: 500}
Book {weight: 0.2, pages: 200}
Book {weight: 0.7, pages: 1000}

التمرين 2: هل تستطيع إنشاء كائنات كتب انطلاقًا من الكائن التالي؟ تلميح: استخدم Object.create(book)

var book = {
  weight: null,
  pages: null
};

var book1 = Object.create(book);

console.log(book1);
console.log(book1.weight);
console.log(book1.pages);

النتيجة كما يلي:

{}
null
null

التمرين 3: ارجع إلى التمرين 2؛ أضف title خاصيةً إلى book1 . وتكون title هي "The Four Agreements: A Practical Guide to Personal Freedom".

var book = {
  weight: null,
  pages: null
};

var book1 = Object.create(book);
book1.title = "The Four Agreements: A Practical Guide to Personal Freedom";

console.log(book1.title);

النتيجة هي: The Four Agreements: A Practical Guide to Personal Freedom

التمرين 4: ارجع إلى التمرين 3؛ هل book و book1 تمتلك الخاصية title?

var book = {
  weight: null,
  pages: null
};

var book1 = Object.create(book);
book1.title = "The Four Agreements: A Practical Guide to Personal Freedom";

console.log(`title is book property: ${book.hasOwnProperty("title")}`);
console.log(`title is book1 property: ${book1.hasOwnProperty("title")}`);

النتيجة كما يلي:

title is book property: false
title is book1 property: true

التمرين 5: ارجع إلى التمرين 2؛ أنشئ كائنات الكتب التالية باستخدام Object.create().

/*
var book1 = {weight:0.5, pages:500};
var book2 = {weight:0.2, pages:200};
var book3 = {weight:0.7, pages:1000};
*/

var book = {
  weight: null,
  pages: null
};

var book1 = Object.create(book);
book1.weight = 0.5;
book1.pages = 500;

var book2 = Object.create(book);
book2.weight = 0.2;
book2.pages = 200;

var book3 = Object.create(book);
book3.weight = 0.7;
book3.pages = 1000;

console.log(book1);
console.log(book2);
console.log(book3);

النتيجة كما يلي:

{weight: 0.5, pages: 500}
{weight: 0.2, pages: 200}
{weight: 0.7, pages: 1000}

التمرين 6: ارجع إلى التمرين 5؛ ما النموذج الأولي لـ book1 ؟ تلميح: استخدم Object.getPrototypeOf(book1).

var book = {
  weight: null,
  pages: null
};

var book1 = Object.create(book);
book1.weight = 0.5;
book1.pages = 500;

console.log(Object.getPrototypeOf(book1));

النتيجة هي: {weight: null, pages: null}

التمرين 7: ارجع إلى التمرين 5؛ ما النموذج الأولي لـ book2 ؟

var book = {
  weight: null,
  pages: null
};


var book2 = Object.create(book);
book2.weight = 0.2;
book2.pages = 200;


console.log(Object.getPrototypeOf(book2));

النتيجة هي: {weight: null, pages: null}

التمرين 8: ارجع إلى التمرين 5؛ ما النموذج الأولي لـ book3 ؟

var book = {
  weight: null,
  pages: null
};

var book3 = Object.create(book);
book3.weight = 0.2;
book3.pages = 200;

console.log(Object.getPrototypeOf(book3));

النتيجة هي: {weight: null, pages: null}

Object.create()

يمكن إنشاء كائن انطلاقًا من آخر باستخدام newObj = Object.create(obj1). obj1 ويصبح الكائن المُمرّر نموذجًا أوليًا للكائن الجديد.

newObj يرث خصائص وطرائق obj1، ويمكن إضافة خصائص وطرائق جديدة إلى newObj


Object.create(proto, properties)

التمرين 9: أنشئ كائنًا يحتوي على value: 5 زوجًا من مفتاح وقيمة.

var obj1 = {
  value: 5
};

التمرين 10: أنشئ كائنًا يحتوي على value: 10 زوجًا من مفتاح وقيمة.

var obj2 = {
  value: 10
};

التمرين 11: ارجع إلى التمرين 9 و التمرين 10؛ أنشئ كائنًا يحتوي على prop1:obj1, prop2:obj2 أزواج مفاتيح وقيم.

var obj = {
  prop1: {
    value: 5
  },
  prop2:{
    value:10
  }
};

console.log(obj);

النتيجة هي: {prop1: {…}, prop2: {…}}

التمرين 12: ارجع إلى التمرين 11؛ أنشئ كائنًا جديدًا بخصائص obj . تلميح: استخدم Object.create({}, obj).

var obj = {
  prop1: {
    value: 5
  },
  prop2:{
    value:10
  }
};

var myObj = Object.create({}, obj);

console.log(myObj);

النتيجة هي: {prop1: 5, prop2: 10}

التمرين 13: أنشئ كائنًا باستخدام Object.create() بالخصائص التالية.

/*
Object properties:
os: "Android"
ram: "8GB"
storage: "512GB"
*/

var phone = Object.create({}, {
  os: {
    value: "Android"
  },
  ram: {
    value: "8GB"
  },
  storage: {
    value: "512GB"
  }
  });

console.log(phone);

النتيجة هي: {os: "Android", ram: "8GB", storage: "512GB"}

التمرين 14: أنشئ كائنًا باستخدام Object.create() بالخصائص التالية.

/*
Object Properties:
firstName: "Ali"
lastName: "Zaki"
username: "AliZaki88"
email: "alizaki@mail.com"
*/

var user = Object.create({},{
  firstname: {
    value: "Ali"
  },
  lastName: {
    value: "Zaki"
  },
  username: {
    value: "AliZaki88"
  },
  email: {
    value: "alizaki@mail.com"
  }
  });

console.log(user);

النتيجة هي: {firstname: "Ali", lastName: "Zaki", username: "AliZaki88", email: "alizaki@mail.com"}

التمرين 15: أنشئ كائنًا باستخدام Object.create() بالخصائص التالية.

/*
Object Properties:
title: "Orobroy"
artist: "Dorantes"
album: "PASSO A DUE"
*/

var song = Object.create({}, {
  title: {
    value: "Orobroy"
  },
  artist: {
    value: "Dorantes"
  },
  album: {
    value: "PASSO A DUE"
  }
  });

console.log(song);

النتيجة هي: {title: "Orobroy", artist: "Dorantes", album: "PASSO A DUE"}

التمرين 16: أنشئ كائنًا باستخدام Object.create() بالخصائص التالية.

/*
Object Properties:
name: "Mahabharata"
author: "Vyasa"
language: "Sanskrit"
verses: 200000
summary: "It narrates the struggle between two groups of cousins in the Kurukshetra War and the fates of the Kaurava and the Pāṇḍava princes and their successors."
}
*/

var epic = Object.create({}, {
  name: {
    value: "Mahabharata"
  },
  author: {
    value: "Vyasa"
  },
  language: {
    value: "Sanskrit"
  },
  verses:{
    value: 200000
  },
  summary:{
    value: "It narrates the struggle between two groups of cousins in the Kurukshetra War and the fates of the Kaurava and the Pāṇḍava princes and their successors."
  }
  });

console.log(epic);

النتيجة هي: {name: "Mahabharata", author: "Vyasa", language: "Sanskrit", verses: 200000, summary: "It narrates the struggle between two groups of cou…ava and the Pāṇḍava princes and their successors."}

التمرين 17: أنشئ كائنًا باستخدام Object.create() بالخصائص التالية.

/*
Object Properties:
name: "Python"
filenameExtension: ".py"
stableRelease: "3.8.5"
*/

var lang = Object.create({}, {
  name:{
    value: "Python"
  },
  filenameExtension: {
    value: ".py"
  },
  stableRelease: {
    value: "3.8.5"
  }
  });

console.log(lang);

النتيجة هي: {name: "Python", filenameExtension: ".py", stableRelease: "3.8.5"}

التمرين 18: أنشئ كائنًا جديدًا من كائن الكتاب التالي. اضبط الوزن على 0.2، وأضف author: "Nawras Ali" إلى الكائن الجديد. استخدم Object.create().

var book = {
  weight: null,
  pages: null
};

var newBook = Object.create(book, {
  weight:{
    value: 0.2
  },
  author: {
    value: "Nawras Ali"
  }
  });

console.log(newBook);

النتيجة هي: {weight: 0.2, author: "Nawras Ali"}

التمرين 19: أنشئ كائنًا جديدًا من كائن الطعام، واضبط المجموعة على "vegetables"، وأضف name: "Leafy green" إلى الكائن الجديد. استخدم Object.create().

var food = {
  group: null
};

var myFood = Object.create(food, {
  group:{
    value: "vegetables"
  },
  name: {
    value: "Leafy green"
  }
  });

console.log(myFood);

النتيجة هي: {group: "vegetables", name: "Leafy green"}

التمرين 20: أنشئ كائنًا جديدًا من كائن الأغنية، واضبط النوع على "Jazz"، وأضف artist: "Miles Davis" إلى الكائن الجديد. استخدم Object.create().

var song = {
  genre: null,
  origin: null,
  title: null
};

var mySong = Object.create(song, {
  genre:{
    value: "Jazz"
  },
  artist: {
    value: "Miles Davis"
  }
  });

console.log(mySong);

النتيجة هي: {genre: "Jazz", artist: "Miles Davis"}

Object.create(proto, properties)

يمكن إضافة خصائص إلى الكائن الجديد بتمرير وسيط إضافي إلى Object.create().

تُعرَّف الخصائص أو تُعدَّل بالطريقة التالية:

{ prop1: { value: ..., }, prop2: { value: ...., } .... }


Object.getPrototypeOf()

التمرين 21: ما النموذج الأولي للكائن التالي؟ تلميح: استخدم Object.getPrototypeOf(obj).

var obj = {
  item1: 1,
  item2: 2,
  item3: 3
}

console.log(Object.getPrototypeOf(obj));

النتيجة كما يلي:

{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}

التمرين 22: ما النموذج الأولي لكائن المستخدم؟ تلميح: استخدم Object.getPrototypeOf(obj).

function User(fstName, lstName){
  this.firstName = fstName;
  this.lastName = lstName;
}

var user1 = new User("Nawras", "Ali");

console.log(Object.getPrototypeOf(user1));

النتيجة كما يلي:

{constructor: ƒ}

التمرين 23: ما النموذج الأولي للكائن التالي؟

var obj = new Array();

console.log(Object.getPrototypeOf(obj));

النتيجة هي: [constructor: ƒ, concat: ƒ, copyWithin: ƒ, fill: ƒ, find: ƒ, …]

التمرين 24: ما النموذج الأولي للكائن التالي؟

var user = {
  firstName: "Ali",
  lastName: "Zaki",
  username: "AliZaki88",
  email: "alizaki@mail.com"
}

console.log(Object.getPrototypeOf(user));

النتيجة هي: {constructor: ƒ, defineGetter: ƒ, defineSetter: ƒ, hasOwnProperty: ƒ, lookupGetter: ƒ, …}

التمرين 25: ما النموذج الأولي للكائن التالي؟

var func = new Function()

console.log(Object.getPrototypeOf(func));

النتيجة هي: ƒ () { [native code] }

getPrototypeOf

Object.getPrototypeOf تُرجع النموذج الأولي للكائن المحدّد.

__proto__ مقابل getPrototypeOf

كل من __proto__ و getPrototypeOf تتيح قراءة النموذج الأولي. لا يمكنك تغييره باستخدام getPrototypeOf، لكن يمكن ذلك باستخدام __proto__.

__proto__ واجهة قديمة يُفضّل تجنّبها؛ استخدم Object.getPrototypeOf للقراءة وObject.setPrototypeOf عند الحاجة إلى التغيير.