#object.create

bir tane obje tanımlayıp 2 tane fonksiyon yazalım. test1,test2

const obj = {    test1:function () {        console.log("test1");    },    test2:function () {        console.log("test2")    } } console.log(obj);

gördüğümüz gibi 2 tane metodu 1 tanede proto özelliği var.  

Yeni bir obje olusturup proto özelliğinde yukarıdaki yeri gösterelim. Object.create kullanıcaz. Bir obje olusturup . Bunun içine buradaki objeyi göndereceğiz

const emp = Object.create(obj); console.log(emp);

bu sekilde protoya baglamıs olduk.  Bakarsak

daha sonradan buna özellik verebiliriz. verelim

bu sekilde prototip baglanabilir.

Başka örnek 

-------------------------

bir tane boş  constructor olusturalım.

function Person() { }

Person’ constructorumuzun prototype özelliğine 2 tane metod ekleyelim 

function Person() { } Person.prototype.test1 = function () {    console.log("test1"); } Person.prototype.test2 = function () {    console.log("test2"); } const person = new Person(); console.log(person);

çıktımızda bakarsak her hangi bir özellik yok sadece bir tane prototype var. onun içinde test1, test2 iki tane fonksiyon var .1 tane constructorumuz var içnde de bir tane prototypemız var oda objeyi gösteriyor en dış katman.

Şimdi bunu baska bir prototype ile bağlayalım.

Emploeei Persondaki test1 ve test2 yi miras alsın. Bunu yapmamız içim Employeedeki prototype olusturmamız gerekiyor. yani Employeenin protoypinin proto özelliği Object.create diyerek Person.prototypedan olusturacagız.

function Person() { } Person.prototype.test1 = function () {    console.log("test1"); } Person.prototype.test2 = function () {    console.log("test2"); } function Employee(name,age) {    this.name = name;    this.age = age; } Employee.prototype = Object.create(Person.prototype); const emp = new Employee("ali",25); emp.test1(); // burada Persondan özellik aldık console.log(emp);

bir kendi proto muza funksiyon ekleyelim.

Employee.prototype.mytest = function () {    console.log(mytest) }

Why is it that during Javascript inheritance, we use:

sub.prototype = Object.create(super.prototype)  //?

Why not just “sub.prototype = super.prototype” if we simply want to inherit super’s methods?

This would have issues as both .prototypes would then be pointing to the same object so changing one would change the other.  

Then I thought, if all objects are just pointers in Javascript, maybe we use Object.create() to literally create a new object (deep-copy-style) so that changing one would not change the other.

Turns out this isn’t 100% correct because it seems that if super.prototype changes, sub.prototype changes, but not vice versa. Changes are only reflected downstream, not upstream.

var a = {test:"hello"}; var b = a; a.test = "bye"; console.log("After changing a.test only; b.test=="+b.test); //If you log b.test, you would get "bye" var a = {test:"hello"}; var b = a; b.test = "bye"; console.log("After changing b.test only; a.test=="+a.test); //If you log a.test, you would get "bye" var a = {test:"hello"}; var b = Object.create(a); a.test = "bye"; console.log("With Obj.create(), after changing a.test only; b.test=="+b.test); var a = {test:"hello"}; var b = Object.create(a); b.test = "bye"; console.log("With Obj.create(), after changing b.test only; a.test=="+a.test);

In terms of syntax this is the simplest strategy. Like functional inheritance an object is inherited from directly. But instead of modifying the object directly Object.create extends it. Here is the parent:

var shape = { type: 'shape', announceType: function() { console.log(this.type); } }; shape.announceType(); //shape

The child is based directly on the parent:

var circle = Object.create(shape, { type: {value: 'circle'} }); circle.announceType();// circle

Keep in mind Object.create is ECMA 5 so it will only work in IE 9+. So for older browsers a polyfill will need to be used. This strategy is simple, but the syntax covers up the implementation making it seem somewhat magical (see the polyfill for what it does). So I prefer the functional inheritance style.