JavaScript object- Oriented_js 객체 지향에 대한 간략한 소개

객체지향을 둘러싼 여러 키워드: 캡슐화, 상속, 다형성, 확장 JavaScript 객체지향

Encapsulation: JavaScript에서 객체를 생성하는 모드 중 개인적으로 클로저를 통해 진정한 의미에서는 캡슐화라고 볼 수 있으니, 먼저 클로저에 대해 간단히 소개하겠습니다.

<script type="text/javascript"> 
function myInfo(){ 
var name ="老鱼",age =27; 
var myInfo = "my name is" + name + "i am" + age +"years old"; 
function showInfo(){ 
alert(myInfo); 
} 
return showInfo; 
} 
var oldFish = myInfo(); 
oldFish(); 
</script>

낯익지 않나요? 맞습니다. 이것은 실제로 간단한 클로저 애플리케이션입니다. 간략한 설명: 위의 myInfo 함수에 정의된 변수는 내장 함수 showInfo에서 액세스할 수 있지만(이해하기 쉽습니다), 이 내장 함수의 반환 참조를 oldFish 변수에 할당하면 이 함수는 showInfo는 myInfo 함수 본문 외부에서 호출되지만 함수 본문에 정의된 변수에도 액세스할 수 있습니다. 아 맞다!

클로저의 원칙을 요약해 보겠습니다. 함수는 호출되는 범위가 아닌 정의된 범위에서 실행됩니다. 실제로 인라인 함수를 반환하는 것은 클로저를 생성하는 가장 일반적인 방법이기도 합니다!

위 설명이 너무 추상적이라고 생각된다면 위 함수를 함께 재구성하여 계층 구조가 더 명확한지 살펴보겠습니다.

<script type="text/javascript"> 
var ioldFish = function(name,age){ 
var name = name,age = age; 
var myInfo = "my name is" + name + "i am" + age +"years old"; 
return{ 
showInfo:function(){ 
alert(myInfo); 
} 
} 
} 
ioldFish("老鱼",27).showInfo(); 
</script>

위 예의 코딩 스타일은 다음과 같습니다. ext yui 더 일반적인 것은 공개와 비공개로, 한눈에 알 수 있습니다. 클로저를 통해 외부에서 직접 접근하고 싶지 않은 것들을 쉽게 숨길 수 있습니다. 함수 내에 정의된 변수에 접근하려면 특정 메소드를 통해서만 접근할 수 있습니다. .. 못찾고 쓰는데 꽤 피곤해서 좀 있다가 다시 찾아왔습니다. ㅎㅎ...

위 예제를 JQ 스타일로 변환하면 다음과 같이 작성해야 합니다. 이런 encapsulation 모드는 open door 모드에 속하며, 여기에 정의된 변수에 접근할 수 있습니다. 외부적으로(아래) 예를 들어 먼저 객체를 인스턴스화한 다음 함수 외부에서 객체의 이름이나 나이 속성에 액세스하면 읽을 수 있습니다.) 물론 이 모드에서는 몇 가지 "숨겨진 규칙"을 설정하여 팀 개발 구성원은 어떤 변수가 개인용인지 이해하고 있으며 개인용 변수 및 메소드 앞에 밑줄 "_"을 추가하여 경고 신호를 나타냅니다! 따라서 "캡슐화"를 달성합니다!

<script type="text/javascript"> 
var ioldFish = function(name,age){ 
return ioldFish.func.init(name,age); 
}; 
ioldFish.func = ioldFish.prototype ={ 
init:function(name,age){ 
this.name = name; 
this.age = age; 
return this; 
}, 
showInfo:function(){ 
var info = "my name is" + this.name +"i am " +this.age+"years old"; 
alert(info); 
} 
}; 
ioldFish.func.init.prototype = ioldFish.func; 
ioldFish(" 老 鱼",27).showInfo(); 
//var oldFish = new ioldFish("老鱼",27); 
//alert(oldFish.name); 
</script>

어떤 모드가 더 좋냐고 묻는 분들도 계실 텐데요. 이것을 어떻게 말합니까? 두 가지 방법 모두 장단점이 있으므로 함께 사용해보세요! 간단히 말해서, 외부 개체가 직접 접근할 수 없는 항목이 있으면 클로저를 사용하여 캡슐화하는 것이 원칙입니다. "확실히 확실히"라는 네 단어는 매우 심오하며 지속적인 연습을 통해서만 진정한 의미를 깨달을 수 있습니다!

상속: 이에 대해 언급할 때 한 가지 더 추가하고 싶습니다. 클로저 캡슐화의 단점은 서브클래스 파생에 도움이 되지 않으므로 클로저는 위험하고 캡슐화됩니다. 조심해야 해! 직관을 위해 다음 예제에서 객체를 생성하는 방법은 "열린 문" 모드를 채택합니다.

자바스크립트에서 상속은 일반적으로 "클래스 상속", "프로토타입 상속", "메타 클래스"의 세 가지 방법으로 구분됩니다. 다음은 세 가지 상속 방법의 원리를 간략하게 소개합니다.

A. 클래스 상속: 이는 주류 프레임워크에서 일반적으로 사용되는 상속 방법입니다. 다음 예를 참조하세요.

<script type="text/javascript"> 
var Name = function(name){ 
this.name = name; 
}; 
Name.prototype.getName = function(){ 
alert(this.name); 
}; 
var Fish = function(name,age){ 
Name.call(this,name); 
this.age = age; 
}; 
Fish.prototype = new Name(); 
Fish.prototype.constructor = Fish; 
Fish.prototype.showInfo = function(){ 
alert(this.age); 
} 
var ioldFish = new Fish("老鱼",27); 
ioldFish.getName(); 
</script>

위 하위 클래스 Fish는 getName이 정의되어 있지 않습니다. 그러나 하위 클래스 Fish의 인스턴스 객체 ioldFish는 여전히 이 메소드를 호출합니다. 이는 하위 클래스 Fish가 상위 클래스 Name에 정의된 getName 메소드를 상속하기 때문입니다. 설명하자면, 여기서 Fish 서브클래스의 프로토타입은 슈퍼 클래스의 인스턴스를 가리키고 있지만, 서브클래스 Fish에서는 getName 메소드가 선언되지 않았지만 프로토타입 체인 원리에 따라 프로토타입이 가리키는 상위 객체를 검색하게 됩니다. 그러한 메소드가 있는지 확인하기 위해 메소드가 발견되지 않으면 원래 프로토타입 객체가 검색됩니다. 이것이 바로 상속의 원리입니다. 여기에 Fish.prototype.constructor = Fish;라는 특별한 설명이 있습니다. 기본 하위 클래스의 프로토타입은 자신을 가리켜야 하지만 프로토타입은 이전에 슈퍼 클래스의 인스턴스 객체를 가리켰으므로 여기에서 다시 설정해야 하기 때문입니다. . 물론, 확장을 위장하는 함수를 통해 해당 코드를 구성할 수 있습니다.

B. 프로토타입 상속은 메모리 성능 측면에서 클래스 상속보다 좋습니다.

<script type="text/javascript"> 
function clone(object){ 
var F = function(){}; 
F.prototype = object; 
return new F(); 
}; 
var Name = { 
name:"who&#39;s name", 
showInfo:function(){ 
alert(this.name); 
} 
}; 
var Fish = clone(Name); 
//Fish.name = "老鱼"; 
Fish.showInfo(); 
</script>

분명히 프로토타입 상속의 핵심은 클론 기능인데, 이는 프로토타입 체인의 원리이기도 합니다. 차이점은 슈퍼 클래스를 직접 복제하므로 하위 클래스가 모든 속성을 상속한다는 점입니다. 특히, 이 유형의 상속에는 생성자를 생성할 필요가 없으며, 객체 변수를 생성하고 해당 속성과 메서드를 정의하기만 하면 됩니다. "." 기호를 통해 속성과 메소드를 지정합니다.

C. 도핑 클래스: 몇 가지 일반적이고 다양한 메소드를 함수로 캡슐화합니다. 다음 함수 종류를 통해 이러한 메서드를 사용해야 합니다. 다양한 클래스에 필요한 메서드를 선택적으로 전달할 수도 있습니다.

<script type="text/javascript"> 
function agument(receveClass,giveClass){ 
if(arguments[2]){ 
var len = arguments.length; 
for(i=2;i<len;i++){ 
receveClass.prototype[arguments[i]] = giveClass.prototype[arguments[i]]; 
} 
} 
else{ 
for(method in giveClass.prototype){ 
if(!receveClass.prototype[method]){ 
receveClass.prototype[method] = giveClass.prototype[method]; 
} 
} 
} 
}; 
var Name = function(){}; 
Name.prototype ={ 
sayLike:function(){ 
alert("i like oldfish"); 
}, 
sayLove:function(){ 
alert("i love oldfish"); 
} 
} 
var Fish = function(){}; 
var ioldFish = new Fish(); 
agument(Fish,Name,"sayLove"); 
ioldFish.sayLove(); 
ioldFish.sayLike(); 
</script>

多态 ：个人觉得这个比较抽象，很难言传，所以下面就从重载和覆盖两个方面来简单阐述一下。

重载 ：上面这个例子中agument函数初始带了两个参数，但是在后面的调用中，agument(Fish,Name,”sayLove”)同样可以带入任意多个参数，javascript的重载，是在函数中由用户自己通过操作arguments这个属性来实现的。

覆盖 ：这个很简单，就是子类中定义的方法如果与从超类中继承过来的的方法同名，就覆盖这个方法（这里并不是覆盖超类中的方法，注意一下），这里就不累赘了！

最后重点着墨说一下this和执行上下文 ，在前面举的封装例子中，this都是表示this所在的类的实例化对象本身，但是并不是千篇一律的，打个比方，通过HTML属性定义的事件处理代码，见如下代码： 

<script type="text/javascript"> 
var Name = function(name) { 
this.name = name; 
this.getName = function () { 
alert(this.name); 
} 
}; 
var ioldFish = new Name("老鱼"), 
btn = document.getElementById(&#39;btn&#39;); 
btn.onclick = ioldFish.getName; 
//btn.onclick = function(){ioldFish.getName.call(ioldFish)}; 
</script>

上例中点了按钮以后弹出框里并没有显示出实例对象的属性，这是因为this的执行上下文已经改变了，他现在所在的上下文应该是input这个 HTML标签，但是该标签又不存在getName这个属性，所以自然无法输出这个属性的属性值了！从这个例子我们不难看出：执行上下文是在执行时才确定的，它随时可以变。
当然你可以去掉上面我注释掉的那段代码，通过call改变this的执行上下文，从而获取getName方法。apply方法同样可以实现改变执行上下文的功能，不过在prototype框架中发现了一个更为优美的实现方法bind。看一下这个方法的实现吧，不得不感叹先人的伟大…… 

Function.prototype.bind = function(obj) { 
var method = this, 
temp = function() { 
return method.apply(obj, arguments); 
}; 
}

相信如果能看明白的话，您已经可以靠这些知识点，去写一个简单的脚本框架了，多多实践，相信不久的将来就能高手进级了