>  기사  >  웹 프론트엔드  >  JavaScript 객체 생성, 함수 캡슐화 및 속성 코드 예제에 대한 자세한 설명

JavaScript 객체 생성, 함수 캡슐화 및 속성 코드 예제에 대한 자세한 설명

伊谢尔伦
伊谢尔伦원래의
2017-07-24 14:57:321927검색

객체 생성

먼저 OOP(객체 지향 프로그래밍)를 이해해 보겠습니다. 우리는 OOP 기술을 사용하여 많은 코드 모듈을 사용하며, 각 모듈은 격리되거나 완전히 독립적입니다. 다른 모듈에서. 이 모듈식 프로그래밍 접근 방식은 엄청난 다양성을 제공하고 코드 재사용 기회를 크게 늘립니다. 이 문제를 더 자세히 설명하려면 컴퓨터에 설치된 최고의 경주용 자동차인 고성능 응용 프로그램을 생각해 보세요. 전통적인 프로그래밍 기술을 사용하면 자동차가 하나의 단위가 됩니다. 자동차를 개선하려면 장치 전체를 교체하거나, 제조업체에 다시 보내거나, 자동차 전문가에게 업그레이드를 요청하거나, 새 자동차를 구입해야 합니다. OOP 기술을 사용하는 경우 쇠톱으로 차체를 자르는 대신 제조업체에서 새 엔진을 구입하고 지침에 따라 직접 교체하기만 하면 됩니다. 그러나 대부분의 주장은 JavaScript가 직접적인 객체지향 언어는 아니지만 시뮬레이션을 통해 상속, 다형성, 캡슐화 등 객체지향 언어만이 할 수 있는 많은 일을 할 수 있다는 것입니다. (못하는 게 하나도 없네, 생각도 안 나네)

//以下三种构造对象的方法 
//new Object,实例化一个Object 
var a=new Object(); 
a.x=1,a.y=2; 
//对象直接量 
var b={x:1,y:2}; 
//定义类型 
function Point(x,y){ //类似于C#中的类 
this.x=x; 
this.y=y; 
} 
var p=new Point(1,2); //实例化类

첫 번째 방법은 기본 객체를 구성하고 속성을 직접 추가하는 방식으로 구현되며, 두 번째 방법은 첫 번째 방법과 유사하며 단축키라고 볼 수 있습니다. 세 번째 방법에서는 "클래스"를 기반으로 동일한 유형의 여러 객체를 생성할 수 있습니다.

객체 속성 캡슐화(공개 및 비공개)
예제를 통해 설명
함수 List(){
var m_elements=[]; //Private 멤버, 객체 외부에서 접근할 수 없습니다. 여기에 var 선언이 없으면 m_elements는 전역 변수가 되어 외부에서 직접 접근이 가능합니다. ])

m_elements=Array.apply(m_elements,arguments); 
//此处模拟getter,使用时alist.length; 
//等价于getName()方式:this.length=function(){return m_elements.length;},使用时 
alist.length(); 
//公有属性,可以通过"."运算符或下标来访问 
this.length={ 
valueOf:function(){ 
return m_elements.length; 
}, 
toString:function(){ 
return m_elements.length; 
} 
} 
//公有方法,此方法使用得alert(alist)相当于alert(alist.toString()) 
this.toString=function(){ 
return m_elements.toString(); 
} 
//公有方法 
this.add=function(){ 
m_elements.push.apply(m_elements,arguments); 
} 
//私有方法如下形式,这里涉及到了闭包的概念,接下来继续说明 
//var add=function()或function add() 
//{ 
//m_elements.push.apply(m_elements,arguments); 
//} 
} 
var alist=new List(1,2,3); 
dwn(alist); //=alert(alist.toString()),输出1,2,3 
dwn(alist.length); //输出3 
alist.add(4,5,6); 
dwn(alist); //输出1,2,3,4,5,6 
dwn(alist.length); //输出6

속성 및 메소드 유형
javascript 여기서 객체의 속성 및 메소드는 4가지 유형을 지원합니다: 개인 속성(개인 속성), 동적 공용 속성(동적 공용 속성), 정적 공용 속성/프로토타입 속성( 정적 공용 속성 또는 프로토타입 속성), 정적 속성(정적 속성 또는 프로토타입 속성) 클래스 특성). 개인 속성은 외부 세계에서 완전히 액세스할 수 없으며 내부 getter 및 setter(둘 다 시뮬레이션)를 통해 액세스할 수 있습니다. 동적 공용 속성은 외부 세계에서 액세스할 수 있으며 각 개체 인스턴스는 복사본을 보유하며 서로 영향을 미치지 않습니다. 각 객체 인스턴스의 고유 복사본이 공유됩니다. 클래스 속성은 인스턴스의 속성으로 처리되지 않고 클래스의 속성으로만 처리됩니다.
다음은 예입니다:

//动态公有类型,静态公有类型(原型属性) 
function myClass(){ 
var p=100; //private property 
this.x=10; //dynamic public property 
} 
myClass.prototype.y=20; //static public property or prototype property,动态为myClass的原型添 
加了属性,将作用于所有实例化了的对象,注意这里用到了prototype,这是一个非常有用的东东 
//要想成为高级javascript阶段,prototype和闭包必须得理解和适当应用 
myClass.z=30; //static property 
var a=new myClass(); 
dwn(a.p) //undefined 
dwn(a.x) //10 
dwn(a.y) //20 
a.x=20; 
a.y=40; 
dwn(a.x); //20 
dwn(a.y); //40 
delete(a.x); //删除对象a的属性x 
delete(a.y); //删除对象a的属性y 
dwn(a.x); //undefined 
dwn(a.y); //20 静态公有属性y被删除后还原为原型属性y 
dwn(a.z); //undefined 类属性无法通过对象访问 
dwn(myClass.z);

위 내용은 JavaScript 객체 생성, 함수 캡슐화 및 속성 코드 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.