상속이란 하위 클래스를 사용하여 다른 상위 클래스를 상속하는 것입니다. 그러면 하위 클래스가 상위 클래스의 모든 속성과 메서드를 자동으로 갖게 됩니다. 이 프로세스를 상속이라고 합니다. JS에서는 상속을 구현하는 방법이 많이 있습니다. JS는 객체 지향 언어이며 해당 객체는 프로토타입 속성을 사용하여 시뮬레이션됩니다. 이 글을 통해 js 시뮬레이션을 통한 세 가지 캡슐화 방법에 대해 알아봅시다. 필요한 친구들이 참고하면 도움이 될 것입니다.
//声明一个父类 function Person(name){ this.name=name; this.age=age; this.say=function(){ alert("我叫"+this.name); } } //声明一个子类 function Student(){ this.no=no; this.study=function(){ alert("我在学习!"); } } // 通过循坏,将父类对象的所有属性和方法,全部赋给子类对象 Object.prototype.extend=function(parent){ for(var i in parent){ this[i].parent[i]; } } var p=new Person("张三",12); var s=new Student("1234567"); //子类对象调用这个扩展方法 s.extend() console.log(s);
위에서 언급한 상속 원칙:
루프를 통해 상위 클래스 개체의 모든 속성과 메서드가 하위 클래스 개체에 할당됩니다. 핵심은 for-in 루프이다. Object를 확장하지 않고도 간단한 루프를 통해 연산을 구현할 수 있다.
하지만 이 방법을 사용하여 상속을 구현하는 데에는 몇 가지 단점이 있습니다.
①한 번의 인스턴스화를 통해 완전한 하위 클래스 개체를 직접 가져올 수 없습니다. 먼저 상위 클래스 개체와 하위 클래스 개체를 가져온 다음 수동으로 병합해야 합니다.
②Object 확장의 상속 방법도 하위 클래스의 개체에 유지됩니다.
두 번째 상속 구현 방법을 살펴보겠습니다~
2. 프로토타입 상속 사용
이 방법을 소개하기 전에 프로토타입 객체와 프로토타입이라는 두 가지 개념에 대해 이야기해 보겠습니다.
1. 프로토타입: 함수의 프로토타입 객체
①함수에만 프로토타입이 있고, 모든 함수에는 프로토타입이 있어야 합니다
②프로토타입 자체도 객체입니다!
③프로토타입은 현재 함수의 참조 주소를 가리킵니다!
2. __proto__: 객체의 프로토타입!
①오브젝트만 __proto__를 갖고, 모든 객체에는 반드시 __proto__가 있어야 합니다
②__proto__도 객체이므로 자체적인 __proto__도 가지고 있습니다. 이 선을 따라 조회하는 순서가 프로토타입 체인입니다.
3 함수와 배열은 둘 다 객체이며 자체 __proto__
//声明父类 function Person(name,age){ this.name=name; this.age=age; this.say=function(){ alert("我叫"+this.name); } } //声明子类 function Student(no){ this.no=no; this.study=function(){ alert("我在学习!我叫"+this.name+"今年"+this.age"); } } //将父类对象赋给子类的prototype Student.prototype=new Person("张三",14); //拿到子类对象时,就会将父类对象的所有属性和方法,添加到__proto__ var s=new Student(); s.study();
프로토타입 상속 원칙을 사용합니다.
상위 클래스 객체를 하위 클래스의 프로토타입에 할당하면 상위 클래스 객체의 속성과 메서드가 서브클래스의 프로토타입에 나타납니다. 그러면 하위 클래스를 인스턴스화할 때 하위 클래스의 프로토타입은 하위 클래스 객체의 __proto__에 있게 됩니다. 마지막으로 상위 클래스 객체의 속성과 메서드는 하위 클래스 객체의 __proto__에 나타납니다.
이러한 상속의 특징:
①하위 클래스 자체의 모든 속성은 멤버 속성이고 상위 클래스에서 상속된 속성은 프로토타입 속성입니다.
② 여전히 1단계 인스턴스화를 통해 완성된 하위 클래스 개체를 가져올 수 없습니다.
상속을 구현하는 세 번째 방법:
call(), Apply(), Bind() 이 세 가지 방법은 매우 유사하며 매개변수 전달만 다릅니다.
function Person(name,age){ this.name=name; this.age=age; this.say=function(){ alert("我叫"+this.name); } } function Student(no,name,age){ this.no=no; this.study=function(){ alert("我在学习!"); } //将父类函数的this,指向为子类函数的this Person.call(this,name,age); } var s=new Student(12,"张三",24); console.log(s);
세 가지 함수의 유일한 차이점은 func의 매개변수 목록을 받아들이는 방식뿐입니다. 그 외에는 기능상의 차이가 없습니다!
세 가지 함수의 작성 방법(차이):
호출 작성 방법: func.call(func의 this가 가리키는 obj, func 매개변수 1, func 매개변수 2,...)
적용 작성 방법: func .apply(func 매개변수 1, func 매개변수 2,...]);
bind 작성 방법: func.bind (func 매개변수 1, func 매개변수로 가리키는 obj); 2,...) ;
관련 권장 사항:
더 많은 풀다운 새로 고침 데이터를 로드하기 위한 mui 풀업의 캡슐화 프로세스에 대한 자세한 설명 예
PHP 기능 세 자리 숫자마다 쉼표를 추가하는 함수 캡슐화
위 내용은 JavaScript 시뮬레이션을 통해 캡슐화를 구현하는 세 가지 방법과 작성 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!