JS 객체지향 (3) 객체 클래스, 정적 속성, 클로저, 프라이빗 속성, 호출 및 적용 사용, 상속_자바스크립트 기술의 세 가지 구현 방법

1.객체 클래스

JS에서는 Object가 모든 클래스의 기본 클래스입니다. Object 클래스를 사용하여 사용자 정의 객체를 생성할 때 생성자(생성자, 프로토타입, hasOwnProperty(property))를 정의할 필요가 없습니다.

var per = new Object();
per.name = 'zhangsan';
per.age = ;
alert(per.name + per.age);

많은 양의 데이터를 저장할 수 있는 한 프로그램에서 개체 변수를 가져오고 싶습니다. 이때 Object 클래스 사용을 고려할 수 있습니다. Object 클래스는 생성자의 정의를 피합니다. Object 클래스에서 일반적으로 사용되는 또 다른 속성: hasOwnProperty

var per = new Object();
per.name = 'zhangsan';
per.age = ;
if per.hasOwnProperty('email'){
alert('具有email');
}else{
alert('无email');
}

2. 정적 속성

일부 객체 지향 언어에서는 static 키워드를 사용하여 JS에서 시뮬레이션할 수 있는 클래스의 정적 속성이나 정적 메서드를 정의할 수 있습니다.

구문:

클래스 이름.속성 이름

클래스 이름.속성=함수(){}

function Person(){
}
Person.count = ;
var p = new Person();
Person.count++;
var p = new Person();
Person.count++;
var p = new Person();
Person.count++;
alert(Person.count);

정적 속성 및 정적 메서드 추가:

function Person(){
Person.count++; //静态属性
Person.getCount=function(){ //静态方法
alert('当前共有' + Person.count + '个人');
}
}
Person.count = ;
var p = new Person();
var p = new Person();
var p = new Person();
Person.getCount();

3. 폐쇄

개념: 소위 클로저란 많은 변수와 이러한 변수에 바인딩된 환경을 포함하는 표현식(보통 함수)을 의미하므로 이러한 변수도 표현식의 일부입니다.

질문하기:

function display(){
var i=; 
}
display();
//在这里，想访问局部变量i

글로벌 세계에서는 지역 변수 i가 범위가 다르기 때문에 접근할 수 없으며, 표시 기능이 실행된 후에는 지역 변수 i가 재활용됩니다. 클로저의 기능: "로컬 변수에 접근" 및 "변수가 차지하는 메모리가 해제되는 것을 방지"

//例
function fn(){
function fn(){
alert('hello');
}
return fn; //返回fn函数首地址
}
var test=fn(); //test也指向了fn函数的首地址
test();

예제 1을 통해 우리는 변수가 함수의 첫 번째 주소를 가리킬 수 있고, 함수가 다른 함수의 첫 번째 주소를 반환할 수도 있다는 것을 알았습니다.

//例
function fn(){
var i = ;
function fn(){
alert(i);
}
return fn; //返回fn函数首地址
}
var test=fn(); //test也指向了fn函数的首地址
test();

예제 2에서 알 수 있듯이 거부 함수를 사용하여 변수 i를 포함하면 지역 변수 i의 메모리가 재활용되지 않습니다.

//例
function fn(){
var i = ;
function fn(){
alert(i++);
}
return fn; //返回fn函数首地址
}
var test=fn(); //test也指向了fn函数的首地址
test();
test();
test();

예제 3에서는 i의 메모리가 절대로 회수되지 않으므로 fn2가 호출될 때마다 i의 값은 1이 됩니다. 연산 결과는 10개가 팝업되고, 11개가 팝업되고, 12개가 팝업되는 것입니다.

폐쇄 원칙: 예 3에는 전역 범위, fn1 범위, fn2 범위의 세 가지 범위가 있습니다. 전역 범위에는 test=fn1()이 있습니다. 실제로 이 문장은 test=fn2와 동일합니다. fn1 범위에는 var i=10 및 return fn2가 있고 fn2 범위에는 Alert(i)가 있습니다. 전역 범위에서 test=fn1()을 실행하면 테스트는 fn2의 범위를 가리킵니다. 이때 fn2 범위 아래의 i는 범위 체인의 규칙에 따라 후크됩니다. fn2.에서 상위 범위의 fn2에서 i를 찾으면 fn1 범위에서 var i=10이 발견되었습니다. 따라서 전역 테스트는 fn2의 i를 후크하고, fn2의 i는 fn1의 i를 후크하므로 fn1은 실행 후 재활용되지 않습니다.

4. 비공개 속성

객체 지향 사고에서는 공개를 원하지 않는 일부 민감한 멤버를 비공개로 정의할 수 있으며 이 기능을 JavaScript로 시뮬레이션할 수 있습니다.

구문:

function Person(p_name){
var name = p_name;
this.age
}

변수: 비공개

이것: 공개

function Person(p_name,p_age){
this.name = p_name;
var age = p_age;
}
var p = new Person('zhangsan',);
alert(p.name);
alert(p.age);

위 예에서는 var를 사용하여 전용 멤버 속성을 나타내려고 하지만 Person 생성자가 실행된 후에는 age가 재활용되어 멤버 속성으로 사용할 수 없습니다.

function Person(p_name,p_age){
this.name = p_name;
var age = p_age;
this.setAge=function(a){
age = a;
}
this.getAge=function(){
return(age);
}
}
var p = new Person('zhangsan',);
p.setAge();
alert(p.getAge());

this.setAge와 this.getAge 두 가지 메소드는 지역 변수 age를 사용하므로 age가 재활용되지 않습니다.

set 메소드만 있는 경우 해당 속성이 쓰기 전용 속성이라는 의미입니다.

get 메소드만 있는 경우 해당 속성이 읽기 전용 속성이라는 의미입니다.

5. 전화 이용 및 신청

호출 및 적용 기능: 지정된 개체를 사용하여 현재 함수를 호출합니다. 호출과 적용의 기능은 완전히 동일하지만 구문이 약간 다릅니다.

구문:

전화([thisObj[,arg1[,arg2[,argN]]]])

첫 번째 매개변수: 함수가 실행될 때 이 매개변수가 누구를 가리키는지

뒤의 매개변수: 필요에 따라

를 순서대로 지정합니다.

적용([thisObj[,argArray]])

첫 번째 매개변수: 함수가 실행될 때 이 매개변수가 누구를 가리키는지

두 번째 매개변수: 배열, 매개변수 집합을 나타냅니다

js에서 함수에는 여러 가지 호출 형식이 있습니다.

Person(); //Person内的this指向window
var p=new Person(); //Person内的this指向p
per.Person(); //Person内的this指向per
function Person(p_name,p_age){
this.name = p_name;
this.age = p_age;
}
function speak(){
alert(this.name + this.age);
}
var p = new Person('zhangsan',);
//speak(); 这样调用this指向window
//p.speak(); p对象没有speak属性

전화를 이용하고 전화신청

function Person(p_name,p_age){
this.name = p_name;
this.age = p_age;
}
function speak(){
alert(this.name + this.age);
}
var p = new Person('zhangsan',);
speak.call(p);
speak.apply(p);

call 및 Apply는 실행 시 두 가지 작업을 수행합니다. 1) 함수 내에서 이를 첫 번째 매개변수로 지정합니다. 2) 함수를 호출합니다.

또한 다음과 같이 문제를 해결할 수도 있습니다.

P1.say=말하기;

P1.say();

이 솔루션은 위의 솔루션과 근본적으로 다릅니다.

위 해결 방법은 Speak 함수를 직접 호출하는 것인데, 함수 내부에서 this의 포인터가 변경됩니다.

다음 솔루션은 p1 객체에 속성을 추가하고 p1 객체의 "볼륨"은 더 커집니다.

예:

<script>
function fn(){
this.style.color='red';
}
function fn(){
this.style.fontSize='px';
}
window.onload=function(){
document.getElementById('btn').onclick=function(){
var div = document.getElementById('div');
fn.call(div);
fn.apply(div);
};
};
</script>
<div id='div'>hello javascript</div>
<input type='button' id='btn' value='确定'>

6.继承的三种实现方法

概念：在有些面向对象语言中，可以使用一个类（子类）继承另一个类（父类），子类可以拥有父类的属性和方法，这个功能可以在js中进行模拟。

三种方法：

第一种：扩展Object方法

Object.prototype.方法=function(父类对象){
for(var i in 父类对象){
this[i] = 父类对象[i];
}　
};

举例说明：

Object.prototype.ext=function(parObject){
//循环遍历父类对象所有属性
for(var i in parObject){
//为子类对象添加这个遍历到的属性
//它的值是父类对象这个属性的属性值
this[i] = parObject[i];
}
}
function Person(p_name,p_age){
this.name=p_name;
this.age=p_age;
this.speak=function(){
alert(this.name+this.age);
}
}
function Student(p_no){
this.no=p_no;
this.say=function(){
alert(this.no+this.name_this.age);
}
}
var stu = new Student();
stu.ext(new Person('xiaoqiang',));
stu.speak();
stu.say();

第二种：使用call和apply方法

语法：

父类构造器.call(this,.......);

function Person(p_name,p_age){
this.name=p_name;
this.age=p_age;
this.speak=function(){
alert(this.name+this.age);
}
}
function Student(p_no,p_name,p_age){
this.no=p_no;
this.say=function(){
alert(this.name+this.age+this.no);
}
Person.call(this,p_name,p_age);
}
var stu = new Student(,'zhagsan',);
stu.speak();
stu.say();

第三种：原型继承

语法：

子类.prototype = new 父类();

function Person(p_name,p_age){
this.name=p_name;
this.age=p_age;
this.speak=function(){
alert(this.name+this.age);
}
}
function Student(p_no){
this.no=p_no;
this.say=function(){
alert(this.name+this.age+this.no);
}
}
Student.prototype = new Person('wangwu',);
var stu = new Student();
stu.speak();
stu.say();

以上内容给大家介绍了JS面向对象（3）之Object类，静态属性，闭包，私有属性， call和apply的使用，继承的三种实现方法，希望对大家有所帮助！