JavaScript 객체 지향 프로그래밍(객체 생성)

黄舟
풀어 주다: 2017-03-01 15:04:37
원래의
1043명이 탐색했습니다.

머리말

객체지향(객체지향,oo) 프로그래밍을 배우기 전에 먼저 객체가 무엇인지 알아야 합니다, ECMA -262, 개체를 "순서가 지정되지 않은 속성의 컬렉션으로 정의합니다. 해당 속성에는 기본 값, 개체 또는 기능이 포함될 수 있습니다 ". JavaScript에서 객체를 생성하는 방법은 여러 가지가 있습니다. 예: 팩토리 패턴, 생성자 패턴, 프로토타입 패턴, 생성자 패턴과 프로토타입 결합 패턴, 기생 생성자 패턴 등

1. 팩토리 패턴

팩토리 패턴은 소프트웨어 공학 분야에서 잘 알려진 디자인 패턴으로, 특정 객체를 생성하는 과정을 추상화합니다. ECMAScript에서는 클래스를 생성할 수 없다는 점을 고려하여 개발자는 특정 인터페이스로 객체 생성 세부 사항을 캡슐화하는 기능을 개발했습니다.

function createStudent(name, age, job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
alert(this.name);
};
return o;
}
var student1= createStudent("xiaoming", 9, "student");
var student2 = createStudent("xiaowagn", 15, "student");
로그인 후 복사

createStudent() 함수는 허용된 매개변수를 기반으로 필요한 모든 정보를 포함하는 Student 개체를 구성할 수 있습니다. 이 함수는 횟수 제한 없이 호출할 수 있으며, 매번 호출할 때마다 속성 3개와 메서드 1개가 포함된 객체를 반환합니다. 팩토리 패턴은 유사한 객체를 여러 개 만드는 문제는 해결하지만 객체 식별 문제(즉, 객체의 유형을 아는 방법)는 해결하지 못합니다. JavaScript가 개발되면서 또 다른 새로운 패턴이 등장했습니다.

2. 생성자 패턴

먼저 이전 코드를 다음과 같이 수정합니다.

function Student(name,age){
      this.name=name;
      this.age=age;
      this.showname=function(){
      alert(this.name);
      }
}
var xiaoming =new Student("xiaoming",6);
var xiaogang =new Student("xiaogang",7);
로그인 후 복사

팩토리 패턴과의 차이점:

1.표시 없음 생성된 객체

2. 객체

에 속성을 직접 할당합니다. 3.이 있습니다. 반품문이 없습니다.

인스턴스를 생성하려면 new 연산자를 사용하세요.

객체 생성 단계:

1.새 객체 생성

2.생성자의 범위 할당 새 개체를 제공합니다(가 이 새 개체를 가리킴)

3.생성자의 코드를 실행하고 이 개체에 속성을 추가합니다.

4.이 객체 반환

 
alert(xiaoming.constructor==Student) //true;
로그인 후 복사

객체의 constructor 속성은 원래 유형을 식별하는 데 사용되었습니다. 객체 . 객체 유형을 확인하거나 instanceof

alert(xiaoming instanceof Student) //true
alert(xiaoming instanceof Object) //true是因为所有对象均继承自Object
로그인 후 복사

를 사용하세요. 사용자 정의 생성자를 생성한다는 것은 그 인스턴스가 future 특정 유형으로 식별됩니다. 여기서 생성자 패턴이 팩토리 패턴보다 성능이 뛰어납니다. 생성자를 사용하는 데에도 단점이 있습니다. 즉, 각 메서드는 각 인스턴스에서 다시 생성되어야 합니다. 예를 들어 , Xiaomingxiaogang에는 모두 showname() 메서드가 있습니다. . 하지만 이 두 메소드는 동일한 함수의 인스턴스가 아닙니다. ECMAScript의 함수는 객체입니다. 따라서 함수가 정의될 ​​때마다 객체가 인스턴스화됩니다. 논리적인 관점에서 생성자를 이때 이렇게 정의할 수도 있습니다.

function student(name,age){
this.name=name;
this.showName=new Function(“alert(this.name)”);
}
로그인 후 복사

보시다시피 각 Student 인스턴스에는 서로 다른 Function 인스턴스가 포함되어 있습니다. 다른 인스턴스에서 동일한 이름을 가진 함수는 동일하지 않습니다. 다음 코드는 이를 보여줍니다.

alert(xiaoming.showName==xiaogang.showname);//false
로그인 후 복사

2. 생성자 패턴

우리가 만드는 모든 함수에는 프로토타입(prototype) 속성이 있으며, 이 속성은 객체를 가리키는 포인터이며, 이 객체의 목적은 속성과 특정 유형의 모든 인스턴스에서 공유할 수 있는 메서드입니다. 문자 그대로 이해하면 프로토타입은 생성자를 호출하여 생성된 객체 인스턴스의 프로토타입 객체입니다. 프로토타입 객체를 사용하면 모든 객체 인스턴스가 포함된 속성과 메서드를 공유할 수 있다는 장점이 있습니다. 즉, 생성자에서 객체 인스턴스에 대한 정보를 정의하는 대신 이 정보를 프로토타입 객체에 직접 추가할 수 있습니다.

function Student(){
 
}
Student.property.name=”default name”;
Student.property.age=0;
Student.property.showName=funciton(){
alert(this.name);
}
Var xiaoming=new Student();
Var xiaogang=new Student();
로그인 후 복사

与构造函数模式的不同时,新对象的这些属性和方法是由所有的实例共享的。换句话说xiaoming和xiaogang访问的都是同一组属性和同一个showName()函数。要理解原型模式的工作原理,必须先理解ECMAScript 中原型对象的性质。

1. 理解原型对象

无论什么时候,只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个prototype

属性,这个属性指向函数的原型对象。在默认情况下,所有原型对象都会自动获得一个constructor

(构造函数)属性,这个属性包含一个指向prototype 属性所在函数的指针。就拿前面的例子来说,

Student.prototype. constructor 指向Student。而通过这个构造函数,我们还可继续为原型对象添加其他属性和方法.

JS中我们通过isPropertyOf()来判断,某个实例是否指向某个函数的的原型。

Eg

Student.property.isPropertyOf(xiaoming);//true。
로그인 후 복사

ECMAScript5中含增加了Object.getPropertyOf()方法来获取一个实例的原型

Eg

alert(Object.getPropertyOf(xiaoming)==Student.property);//true
alert(Object.getPropertyOf(xiaoming).name);//default name
로그인 후 복사

此外,我们还可以通过hasOwnProperty()方法来检测一个属性是存在实例中还是存在原型中。alert(xiaoming.hasOwnProperty(“name”));//false

alert(xiaoming.property.hasOwnProperty(“name”));//true
로그인 후 복사

原型模式也不是没有缺点。首先,它省略了为构造函数传递初始化参数这一环节,结果所有实例在默认情况下都将取得相同的属性值。虽然这会在某种程度上带来一些不方便,但还不是原型的最大问题。原型模式的最大问题是由其共享的本性所导致的。原型中所有属性是被很多实例共享的,这种共享对于函数非常合适。对于那些包含基本值的属性倒

也说得过去,毕竟(如前面的例子所示),通过在实例上添加一个同名属性,可以隐藏原型中的对应属性。然而,对于包含引用类型值的属性来说,问题就比较突出.

四、组合使用构造函数模式和原型模式

创建自定义类型的最常见方式,就是组合使用构造函数模式与原型模式。构造函数模式用于定义实例属性,而原型模式用于定义方法和共享的属性。结果,每个实例都会有自己的一份实例属性的副本,但同时又共享着对方法的引用,最大限度地节省了内存。另外,这种混成模式还支持向构造函数传递参数;可谓是集两种模式之长。

function Student(name,age){
this.name=name;
this.age=age;
}
Student.property.showName=funciton(){alert(this.name);}
로그인 후 복사

这种构造函数与原型混成的模式,是目前在ECMAScript 中使用最广泛、认同度最高的一种创建自定义类型的方法。可以说,这是用来定义引用类型的一种默认模式。

五、寄生构造函数模式

通常,在前述的几种模式都不适用的情况下,可以使用寄生(parasitic)构造函数模式。这种模式的基本思想是创建一个函数,该函数的作用仅仅是封装创建对象的代码,然后再返回新创建的对象;但从表面上看,这个函数又很像是典型的构造函数。

funciton Student(name,age){
Var o=new Object();
o.name=name;
o.age=age;
o.showName=function(){alert(this.name);}
Reurn o;
}
로그인 후 복사

关于寄生构造函数模式,有一点需要说明:首先,返回的对象与构造函数或者与构造函数的原型属性之间没有关系;也就是说,构造函数返回的对象与在构造函数外部创建的对象没有什么不同。为此,不能依赖instanceof 操作符来确定对象类型。由于存在上述问题,我们建议在可以使用其他模式的情况下,不要使用这种模式。个人感觉这模式还是有点模仿工厂模式。

 以上就是JavaScript面向对象编程(对象创建)的内容,更多相关内容请关注PHP中文网(www.php.cn)!


원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿