javascript oop pattern

26
Object-Oriented JavaScript .97

Upload: -

Post on 12-Jul-2015

282 views

Category:

Software


0 download

TRANSCRIPT

Page 1: JavaScript OOP Pattern

Object-Oriented JavaScript .97�

Page 2: JavaScript OOP Pattern

"6�!� ������+(-�&)����� �.97��#5 �9�8�)�/������� �.97��/�������������%-�!�: �8�)�/���

Page 3: JavaScript OOP Pattern

�������!

Page 4: JavaScript OOP Pattern

!:9-(�+� =/� "�6��

����

.7�#*0�%,

Page 5: JavaScript OOP Pattern

/�L%���

/�D;%��

/�Qbo%���

����������

Page 6: JavaScript OOP Pattern

�����$�����������&4;���

!

(���8����?>'���1��<��

Page 7: JavaScript OOP Pattern

)��

55�����

0�32��������

Page 8: JavaScript OOP Pattern

"g�����mj

Page 9: JavaScript OOP Pattern

!var oName = {name : “javascript”, getName : function() {return this.name}};!var oName2 = {name : “c#”, getName : function() {return this.name}};!var oName3 = {name : “original”, getName : function() {return this.name}};!!

���� � ������������

Page 10: JavaScript OOP Pattern

!var oName = {name : “javascript”, getName : function() {return this.name}};!var oName2 = {name : “c#”, getName : function() {return this.name}};!var oName3 = {name : “original”, getName : function() {return this.name}};!!

���� � �������������<�uV�

1]p�),Z�rJ����������&I�FH

Page 11: JavaScript OOP Pattern

function Name(name) {! this.name = name;

this.getName = function() {! return this.name;! };

this.setName = function(newName) {! this.name = newName;! };!}!!!var obj = new Name("javascript");!obj.getName();!!var obj = new Name(“C#”);!obj.getName();

���FH^�mj����������� �����

Page 12: JavaScript OOP Pattern

function Name(name) {! this.name = name;

this.getName = function() {! return this.name;! };

this.setName = function(newName) {! this.name = newName;! };!}!!!var obj = new Name("javascript");!obj.getName();!!var obj2 = new Name(“C#”);!obj2.getName();!!obj.getName === obj2.getName; //false

���FH^�mj����������� �����

1]p�),Z�rJ�����������

&I�FH

Page 13: JavaScript OOP Pattern

function Name(name) {! this.name = name;!}!!Name.prototype.getName = function() {! return this.name;!};

Name.prototype.setName = function(newName) {! this.name = newName;!};!!!!var obj = new Name("javascript");!obj.getName();!!var obj2 = new Name(“C#”);!obj2.getName();!

���������!���mj�

Page 14: JavaScript OOP Pattern

function Name(name) {! this.name = name;!}!!Name.prototype.getName = function() {! return this.name;!};

Name.prototype.setName = function(newName) {! this.name = newName;!};!!!!var obj = new Name("javascript");!obj.getName();!!var obj2 = new Name(“C#”);!obj2.getName();!obj.getName === obj2.getName; //true

���������!���mj�

`EV�",o09�1_�r

Page 15: JavaScript OOP Pattern

function Name(name) {! this.name = name;!}!!Name.prototype.getName = function() {! return this.name;!};

Name.prototype.setName = function(newName) {! this.name = newName;!};!!!!var obj = new Name("javascript");!debugger;!obj.getName();!!var obj2 = new Name("C#");!obj2.getName();!

���������!���mj�

Page 16: JavaScript OOP Pattern

function Name(name) {! this.name = name;!}!!Name.prototype.getName = function() {! return this.name;!};

Name.prototype.setName = function(newName) {! this.name = newName;!};!!!!var obj = new Name("javascript");!debugger;!obj.getName();!!var obj2 = new Name("C#");!obj2.getName();!

���������!���mj�

Page 17: JavaScript OOP Pattern

function Name(name) {! this.name = name;!}!!Name.prototype.getName = function() {! return this.name;!};

Name.prototype.setName = function(newName) {! this.name = newName;!};!!!!var obj = new Name("javascript");!debugger;!obj.getName();!!var obj2 = new Name("C#");!obj2.getName();!

���������!���mj�

obj.__proto__

\MjM*BT����������6+�IHT�������!��cA<�-P�2�

Page 18: JavaScript OOP Pattern

function Name(name) {! this.name = name;!}!!Name.prototype.getName = function() {! return this.name;!};

Name.prototype.setName = function(newName) {! this.name = newName;!};!!!!var obj = new Name("javascript");!debugger;!obj.getName();!!var obj2 = new Name("C#");!obj2.getName();!

���������!���mj�

obj.__proto__ == Name.prototype

?

\MjM*BT����������6+�IHT�������!��cA<�-P�2�

Page 19: JavaScript OOP Pattern

function Name(name) {! this.name = name;!}!!Name.prototype.getName = function() {! return this.name;!};

Name.prototype.setName = function(newName) {! this.name = newName;!};!!!!var obj = new Name("javascript");!debugger;!obj.getName();!!var obj2 = new Name("C#");!obj2.getName();!

���������!���mj�

obj.constructor === Name//true

$hZ�FH^<�R'�OY4

Page 20: JavaScript OOP Pattern

function Name(name) {! this.name = name;!}!!Name.prototype.getName = function() {! return this.name;!};

Name.prototype.setName = function(newName) {! this.name = newName;!};!!!!var obj = new Name("javascript");!debugger;!obj.getName();!!var obj2 = new Name("C#");!obj2.getName();!

���������!���mj�

obj instanceof Name //true

$h"�lc�i7MZ�\MjM�\g�t\

Page 21: JavaScript OOP Pattern

function Name(name) {! this.name = name;!}!!Name.prototype.getName = function() {! return this.name;!};

Name.prototype.setName = function(newName) {! this.name = newName;!};!!!!var obj = new Name("javascript");!debugger;!obj.getName();!!var obj2 = new Name("C#");!obj2.getName();!

���������!���mj�

obj instanceof Name //true !obj instanceof Object //true. // 상속받은 생성자도 true로 나옴

$h"�lc�i7MZ�\MjM�\g�t\

Page 22: JavaScript OOP Pattern

var nameModel = {};!!!var nameController = {! getName : function() {! return this.name;! },! setName : function(newName) {! this.name = newName;! }!}!!!nameController.setName.call(nameModel,"javascript");!nameController.getName.call(nameModel);!

�����������!�$h�?\3�

Page 23: JavaScript OOP Pattern

var nameModel = {};!!var nameController = {! getName : function() {! return this.name;! },! setName : function(newName) {! this.name = newName;! }!}!!nameController.setName.call(nameModel,"javascript");!nameController.getName.call(nameModel);!!var nameModel2 = {};!nameController.setName.call(nameModel2, "java");!nameController.getName.call(nameModel2);

�����������!�$h�?\3�

Page 24: JavaScript OOP Pattern

�������1�3�

,$���)47����[W0���2*'0��

Page 25: JavaScript OOP Pattern

Kd�������������T�.sG�RPA'�P7�*VY�c=sG�������T������o)�!�� ���#�$����� ���&.� %���'��)*$���� �+���-�!+,���(�."

Page 26: JavaScript OOP Pattern

Kd���^N[�S5�n8ek<�qg�(ha\�QY�'>o'�&vU:�o)���#@[�?8�",p�JfX8�fCo)��