JavaScript 프로토타입 및 프로토타입 chains_javascript 기술에 대한 궁극적인 세부 설명

JavaScript 프로토타입 및 프로토타입 체인에 대한 궁극적인 세부 설명

1. 일반 객체와 함수 객체

JavaScript에서는 모든 것이 객체입니다! 하지만 대상도 다릅니다. 일반 객체와 함수 객체로 구분됩니다. Object와 Function은 JS에 포함된 함수 객체입니다. 다음은 몇 가지 예입니다

function f1(){};
var f2 = function(){};
var f3 = new Function('str','console.log(str)');
var o3 = new f1();
var o1 = {};
var o2 =new Object();
console.log(typeof Object); //function
console.log(typeof Function); //function
console.log(typeof o1); //object
console.log(typeof o2); //object
　console.log(typeof o3); //object
　　console.log(typeof f1); //function
　　console.log(typeof f2); //function
　　console.log(typeof f3); //function 

위의 예에서 o1 o2 o3은 일반 객체이고, f1 f2 f3은 함수 객체입니다. 실제로 차이점을 구분하는 방법은 매우 간단합니다. new Function()을 통해 생성된 모든 개체는 함수 개체이고 나머지는 일반 개체입니다. f1, f2는 모두 최종 분석에서 new Function()을 통해 생성됩니다. 함수 객체는 New Function()을 통해서도 생성됩니다.

2. 프로토타입 객체

JavaScript에서는 객체(함수)가 정의될 ​​때마다 객체에 미리 정의된 속성이 포함됩니다. 함수 객체의 속성 중 하나는 프로토타입 객체입니다. 참고: 일반 객체에는 프로토타입이 없지만 __proto__ 속성이 있습니다.

프로토타입 객체는 실제로는 일반 객체입니다(함수 객체이지만 매우 특수한 Function.prototype은 제외합니다. 프로토타입 속성이 없습니다(앞서 언급했듯이 함수 객체는 모두 프로토타입 속성을 가집니다)). 아래 예를 살펴보세요.

function f1(){};
console.log(f1. prototype) //f1 {}
console.log(typeof f1. prototype) //Object
console.log(typeof Function. prototype) // Function
console.log(typeof Object. prototype) // Object
console.log(typeof Function. prototype. prototype) //undefined

이 문장 console.log(f1.prototype) //f1 {}의 출력에서 ​​f1.prototype이 f1의 인스턴스 객체임을 알 수 있습니다. f1이 생성되면 인스턴스 객체가 생성되어 해당 프로토타입에 할당됩니다.

var temp = new f1();
f1. prototype = temp;

그래서 Function.prototype이 왜 함수 객체인지 이해하기 쉽습니다. 위에서 언급했듯이 new Function()에 의해 생성된 모든 객체는 함수 객체이므로 temp도 함수 객체입니다.

var temp = new Function ();
Function. prototype = temp;

프로토타입 객체는 어떤 용도로 사용되나요? 주로 상속에 사용됩니다. 예를 들어보세요:

var person = function(name){
　　this.name = name
};
person.prototype.getName = function(){
return this.name;
}
var zjh = new person(‘zhangjiahao');
zjh.getName(); //zhangjiahao

从这个例子可以看出，通过给person.prototype设置了一个函数对象的属性，那有person实例（例中：zjh）出来的普通对象就继承了这个属性。具体是怎么实现的继承，就要讲到下面的原型链了。

三．原型链

JS在创建对象（不论是普通对象还是函数对象）的时候，都有一个叫做__proto__的内置属性，用于指向创建它的函数对象的原型对象prototype。以上面的例子为例：

console.log(zjh.__proto__ === person.prototype) //true

同样，person.prototype对象也有__proto__属性，它指向创建它的函数对象（Object）的prototype

console.log(person.prototype.__proto__ === Object.prototype) //true

继续，Object.prototype对象也有__proto__属性，但它比较特殊，为null

console.log(Object.prototype.__proto__) //null

我们把这个有__proto__串起来的直到Object.prototype.__proto__为null的链叫做原型链。如下图：

四．内存结构图

为了更加深入和直观的进行理解，下面我们画一下上面的内存结构图：

画图约定：

疑点解释：

1.Object.__proto__ === Function.prototype // true

Object是函数对象，是通过new Function()创建，所以Object.__proto__指向Function. prototype。

2.Function.__proto__ === Function.prototype // true

Function 也是对象函数，也是通过new Function()创建，所以Function.__proto__指向Function. prototype。

自己是由自己创建的，好像不符合逻辑，但仔细想想，现实世界也有些类似，你是怎么来的，你妈生的，你妈怎么来的，你姥姥生的，……类人猿进化来的，那类人猿从哪来，一直追溯下去……，就是无，（NULL生万物）

正如《道德经》里所说“无，名天地之始”。

3.Function.prototype.__proto__ === Object.prototype //true

其实这一点我也有点困惑，不过也可以试着解释一下。

Function.prototype是个函数对象，理论上他的__proto__应该指向 Function.prototype，就是他自己，自己指向自己，没有意义。

JS一直强调万物皆对象，函数对象也是对象，给他认个祖宗，指向Object. prototype。Object. prototype.__proto__ === null，保证原型链能够正常结束。

五．constructor

原型对象prototype中都有个预定义的constructor属性，用来引用它的函数对象。这是一种循环引用

person.prototype. constructor === person //true
Function.prototype.constructor === Function //true
Object.prototype.constructor === Object //true

完善下上面的内存结构图：

有两点需要注意：

1.注意Object.constructor===Function；//true 本身Object就是Function函数构造出来的
2.如何查找一个对象的constructor，就是在该对象的原型链上寻找碰到的第一个constructor属性所指向的对象

六．总结

1.原型和原型链是JS实现继承的一种模型。

2.原型链的形成是真正是靠__proto__ 而非prototype

要深入理解这句话，我们再举个例子，看看前面你真的理解了吗？

var animal = function(){};
var dog = function(){};
animal.price = 2000;//
dog.prototype = animal;
var tidy = new dog();
console.log(dog. price) //undefined
console.log(tidy.price) // 2000

왜요? 메모리 다이어그램 그리기:

이게 무슨 뜻인가요? dog.price 실행 시 프로토타입이 가리키는 동물에는 가격 속성이 없지만 이 "체인"을 따라 검색하지 않는 것으로 나타났습니다. 마찬가지로 tidy.price가 실행되면 그런 속성은 없지만 __proto__는 동물을 가리키며 이 체인을 따라 검색합니다. Animal에는 가격 속성이 있으므로 tidy.price는 2000을 출력합니다. 프로토타입 체인의 실제 형성은 프로토타입이 아닌 __proro__에 의존합니다.

그래서 dog.__proto__ = 동물이 이렇게 지정되면. 그 개 가격 = 2000.

437fcc348f7b1c54dc1b8f8cb5743cbc1.

마지막으로 비유를 들어보겠습니다. 비록 정확하지는 않지만 프로토타입을 이해하는 데 도움이 될 것입니다.

아버지(함수객체)가 큰형인 장남(프로토타입)을 낳았습니다. 아버지는 큰형을 위해 많은 장난감을 사주셨고, 당신(__proto__) 사이의 유대관계는 더욱 깊어질 것입니다. 자동으로 형의 장난감을 소유하게 됩니다. 마찬가지로, 먼저 큰아들을 낳고 그에게 장난감을 많이 사주면, 둘째 아들이 생기면 당연히 큰아들의 장난감을 모두 차남이 가지게 됩니다. 그들이 싸울 것인지 말 것인지는 우리가 상관할 바가 아닙니다.

그래서 큰 형에게서 물려받았다는 것은 '형은 아버지 같다'는 말이 증명되는 것입니다.