js의 생성자 및 Prototype_javascript 기술에 대한 심층 분석

함수를 정의할 때 함수 자체에는 기본적으로 프로토타입 속성이 있지만, 객체를 생성하기 위해 new 연산자를 사용하면 프로토타입 속성이 없습니다. 이를 설명하는 예를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

함수 a( c){
this.b = c;
this.d =function(){
alert(this.b)
}
}
var obj = new a( 'test');
alert(typeof obj.prototype);//undefine
alert(typeof a.prototype);//object

에서 볼 수 있듯이 위의 예에서 프로토타입 속성은 객체를 가리킵니다. 아래 그림을 참조하세요.

a.prototype에는 2개의 속성이 포함되어 있습니다. 하나는 생성자이고 다른 하나는 __proto__입니다.

이 생성자는 생성자 a이며 이해하기 쉽습니다.

그럼 __proto__는 무엇인가요?

여기에는 프로토타입 체인 개념이 포함됩니다.

각 객체는 그 내부의 속성, 즉 __proto__를 초기화합니다. 객체의 속성에 액세스할 때 이 속성이 객체 내부에 존재하지 않으면 __proto__ 속성에서 해당 속성을 찾습니다. 자체적인 __proto__가 있을 것이므로 계속해서 찾았습니다.

mozzlia 설명을 참고해주세요

객체가 생성되면 해당 __proto__ 속성이 함수의 prototype 속성을 ​​구성하도록 설정됩니다. 예를 들어 var fred = new Employee();은 fred.__proto__ = Employee.prototype;을 발생시킵니다.

객체에 직접 선언되지 않은 속성을 조회하기 위해 런타임에 사용됩니다. 예를 들어 fred.doSomething()이 실행되고 fred에 doSomething이 포함되어 있지 않은 경우 fred.__proto__가 선택됩니다. Employee.prototype이 포함된 doSomething을 가리킵니다. 즉, fred.__proto__.doSomething()이 호출됩니다.

<em>__proto__</em>은 인스턴스의 속성이고 prototype는 생성자 함수의 속성입니다.

믿거나 말거나 사진을 감상해보세요

alert(obj.__proto__ === a.prototype) //true를 추가하면

마찬가지로 여기에서는 새로운 운영자가 하는 일을 분석합니다

1. var obj={}; 즉, 객체 obj를 초기화합니다.
2. obj.__proto__=a.prototype;
3. a.call(obj); 즉, obj를 구성하는 것은 obj 초기화라고도 할 수 있습니다.

이 예를 좀 더 복잡하게 수정해 보겠습니다.

코드 복사 코드는 다음과 같습니다.

function a(c){
this.b = c;
this.d =function(){
alert(this.b)
}
}
a.prototype.test = function(){
alert( this.b);
}
var obj = function(){}
obj.prototype = new a('test')
obj.prototype.test1 =function() {
alert(22222)
}
var t = new obj('test')
t.test();//alert('test'); >
이 프로세스를 분석해 보겠습니다

var t = new obj('test');에서 t.__proto__ = obj.prototype을 얻을 수 있지만 위에서는 obj.prototype =new a('test'를 지정합니다. ) ; 이렇게 보면 됩니다

obj.prototype = p, p = new a('test'); p.__proto__ = a.prototype;

그러면 obj.prototype입니다. __proto__ = a .prototype, from t.__proto__ = obj.prototype, t.__proto__.__proto__ = a.prototype,

따라서 객체 t는 먼저 자체 프로토타입이 있는지 확인하기 위해 자체 프로토타입을 찾습니다. 테스트 함수가 없는 것으로 확인되면 상위 레벨, 즉 t.__proto__, 즉 obj.prototype으로 이동하여 테스트 함수를 찾지만 obj.prototype에는 없습니다. 이 기능을 선택한 다음 더 높은 수준으로 검색하세요. 즉,

t.__proto__.__proto__가 발견되므로 t.__proto__.__proto__ = a.prototype이므로 이 메서드는 a.prototype에서 발견되고, 경고('test')가 출력됩니다.
여기서 js의 프로토타입 체인의 본질은 __proto__에 있다고 분석하고 결론을 내릴 수 있습니다.

다른 예 보기

코드 복사 코드는 다음과 같습니다.

함수 a(c){
this.b = c;
this.d =function(){
alert(this.b)
}
}
var obj = new a('test');
alert(obj.constructor);//function a(){}
alert(a.prototype.constructor);//function a() {}

위에서 언급한 __proto__에 따라 분석해 보겠습니다. 우선 obj에는 속성 생성자가 없지만 obj.__proto__ = a.prototype; 🎜>a.prototype에서 검색하고 a.prototype.constructor는 a일 뿐이므로 둘의 결과는 같습니다