나에게서 javascript 프로토타입, getPrototypeOf 및 __proto___javascript 기술을 배워보세요.

1. 프로토타입, getPrototypeOf 및 _proto_에 대한 심층적 이해

prototype, getPropertyOf 및 _ proto _는 프로토타입에 액세스하는 데 사용되는 세 가지 방법입니다. 비슷한 방식으로 이름이 지정되어 혼동을 일으킬 수 있습니다.

사용 방법은 다음과 같습니다.

• C.prototype: 일반적으로 유형에 대한 프로토타입 상속 객체를 생성하는 데 사용됩니다. 예를 들어, C.prototype = xxx이면 new C()를 사용하여 얻은 객체의 프로토타입 객체가 xxx가 됩니다. 물론 obj.prototype을 사용하여 obj의 프로토타입 객체를 가져올 수도 있습니다.
• getPropertyOf: Object.getPropertyOf(obj)는 obj 객체의 프로토타입 객체를 가져오는 ES5의 표준 메소드입니다.
• _ proto _: obj._ proto _는 obj 객체의 프로토타입 객체를 가져오는 데 사용되는 비표준 방법입니다.

시제품을 얻는 다양한 방법을 완전히 이해하기 위한 예는 다음과 같습니다.

function User(name, passwordHash) { 
 this.name = name; 
 this.passwordHash = passwordHash; 
} 
User.prototype.toString = function() { 
 return "[User " + this.name + "]"; 
}; 
User.prototype.checkPassword = function(password) { 
 return hash(password) === this.passwordHash; 
}; 
var u = new User("sfalken", "0ef33ae791068ec64b502d6cb0191387"); 

사용자 함수에는 값이 빈 개체인 기본 프로토타입 속성이 있습니다. 위의 예에서는 toString과 checkPassword라는 두 가지 메소드가 프로토타입 객체에 추가되었습니다. 새로운 객체 u를 얻기 위해 User 생성자가 호출되면 해당 프로토타입 객체가 자동으로 User.prototype 객체에 할당됩니다. 즉, u.prototype === User.prototype은 true를 반환합니다.

User 함수, User.prototype, 객체 u의 관계는 다음과 같이 표현할 수 있습니다.

위 그림의 화살표는 상속관계를 나타냅니다. u 개체의 일부 속성에 액세스할 때 먼저 u 개체의 속성을 읽으려고 시도합니다. u 개체에 해당 속성이 없으면 해당 프로토타입 개체를 찾습니다.

예를 들어 u.checkPassword()가 호출되면 checkPassword가 프로토타입 객체에 정의되어 있으므로 u 객체에서 속성을 찾을 수 없으므로 u의 프로토타입에서 검색됩니다. > u.프로토타입(User.prototype).

앞서 언급했듯이 getPrototypeOf 메소드는 객체의 프로토타입 객체를 가져오는 ES5의 표준 메소드입니다. 따라서:

Object.getPrototypeOf(u) === User.prototype; // true 

일부 환경에서는 객체의 프로토타입 객체를 가져오기 위해 비표준 _ proto _ 속성도 제공됩니다. 환경이 ES5 표준 메소드 getPrototypeOf 메소드를 제공하지 않는 경우 이 속성을 일시적으로 대체하여 사용할 수 있습니다. 다음 코드를 사용하여 해당 환경에서 _ proto _가 지원되는지 테스트할 수 있습니다.

u.__ proto __ === User.prototype; // true 

그래서 JavaScript에서는 클래스의 개념은 인스턴스 간 메소드를 공유하는 생성자(User)와 프로토타입 객체(User.prototype)에 의해 완성됩니다. 생성자는 위 예의 이름 및 비밀번호 속성과 같은 각 개체의 고유 속성을 구성하는 역할을 담당합니다. 프로토타입 객체는 위 예제의 checkPassword 및 toString 메소드와 같이 모든 객체에 공통적인 속성을 저장하는 일을 담당합니다. 아래 그림과 같습니다:

2. 객체를 얻으려면 먼저 _ proto _

대신 Object.getPrototypeOf를 사용하세요.

Object.getPrototypeOf는 ES5에서 객체 프로토타입 객체를 얻기 위한 표준 API로 도입되었습니다. 그러나 많은 실행 환경에서는 동일한 목적을 달성하기 위해 특별한 proto 속성도 제공됩니다.

모든 환경이 이 _ proto _ 속성을 제공하는 것은 아니며 각 환경이 이를 다르게 구현하기 때문에 예를 들어 null 프로토타입이 있는 객체의 경우 일부 결과가 일관되지 않을 수 있습니다.

// 在某些环境中 
var empty = Object.create(null); // object with no prototype 
"_proto _" in empty; // false (in some environments) 

// 在某些环境中 
var empty = Object.create(null); // object with no prototype 
"_proto_" in empty; // true (in some environments) 

그러므로 환경에서 Object.getPrototypeOf 메소드가 지원되면 먼저 이를 사용하세요. 지원되지 않더라도 구현할 수 있습니다.

if (typeof Object.getPrototypeOf === "undefined") { 
 Object.getPrototypeOf = function(obj) { 
  var t = typeof obj; 
  if (!obj || (t !== "object" && t !== "function")) { 
   throw new TypeError("not an object"); 
  } 
  return obj._proto_; 
 }; 
} 

上述代码首先会对当前环境进行检查，如果已经支持了Object.getPrototypeOf，就不会再重复定义。

三、绝不要修改_ proto _

和Object.getPrototypeOf相比，_ proto _的特殊之处还体现在它能够修改一个对象的原型继承链。因为它是一个属性，除了执行获取它的操作外，还能够对它进行设置。

但是，绝不要修改_ proto _。原因如下：

• 首先，最显而易见的原因就是便携性。因为不是所有的JavaScript执行环境都支持这一属性，所以使用了_ proto _ 之后，代码就不能在那些不支持_ proto _的环境中运行了。
• 其次，是性能上的考虑。现在的JavaScript引擎的实现都会针对对象属性的存取作出大量的优化，因为这些操作是最常用的。当修改了对象的_ proto _后，就相当于修改了对象的整个继承结构，这样做回导致很多优化都不再可用。
• 最后，最重要的原因是需要保证程序的可靠性。因为改变_ proto _属性后，对象的原型继承链也许会被完全地改变。当程序中有其他代码依赖于原来的继承链时，就会出现不可意料的错误。通常而言，原型继承链需要保持稳定。

当需要为一个新创建的对象赋予一个原型对象时，可以使用ES5提供的Object.create方法。对于未实现ES5标准的环境，可以给出来一个不依赖于_ proto _的Object.create方法的实现。

四、解决 _ proto _兼容问题， 让构造函数不再依赖new关键字

在将function当做构造函数使用时，需要确保该函数是通过new关键字进行调用的。

function User(name, passwordHash) { 
 this.name = name; 
 this.passwordHash = passwordHash; 
} 

如果在调用上述构造函数时，忘记了使用new关键字，那么：

var u = User("baravelli", "d8b74df393528d51cd19980ae0aa028e"); 
u; // undefined 
this.name; // "baravelli" 
this.passwordHash; // "d8b74df393528d51cd19980ae0aa028e" 

可以发现得到的u是undefined，而this.name以及this.passwordHash则被赋了值。但是这里的this指向的则是全局对象。

如果将构造函数声明为依赖于strict模式：

function User(name, passwordHash) { 
 "use strict"; 
 this.name = name; 
 this.passwordHash = passwordHash; 
} 
var u = User("baravelli", "d8b74df393528d51cd19980ae0aa028e"); 
// error: this is undefined 

那么在忘记使用new关键字的时候，在调用this.name= name的时候会抛出TypeError错误。这是因为在strict模式下，this的默认指向会被设置为undefined而不是全局对象。

那么，是否有种方法能够保证在调用一个函数时，无论使用了new关键字与否，该函数都能够被当做构造函数呢？下面的代码是一种实现方式，使用了instanceof操作：

function User(name, passwordHash) { 
 if (!(this instanceof User)) { 
  return new User(name, passwordHash); 
 } 
 this.name = name; 
 this.passwordHash = passwordHash; 
} 

var x = User("baravelli", "d8b74df393528d51cd19980ae0aa028e"); 
var y = new User("baravelli", "d8b74df393528d51cd19980ae0aa028e"); 
x instanceof User; // true 
y instanceof User; // true 

以上的if代码块就是用来处理没有使用new进行调用的情况的。当没有使用new时，this的指向并不是一个User的实例，而在使用了new关键字时，this的指向是一个User类型的实例。

另一个更加适合在ES5环境中使用的实现方式如下：

function User(name, passwordHash) { 
 var self = this instanceof User ? this : Object.create(User.prototype); 
 self.name = name; 
 self.passwordHash = passwordHash; 
 return self; 
} 

Object.create方法是ES5提供的方法，它能够接受一个对象作为新创建对象的prototype。那么在非ES5环境中，就需要首先实现一个Object.create方法：

if (typeof Object.create === "undefined") { 
 Object.create = function(prototype) { 
  function C() { } 
  C.prototype = prototype; 
  return new C(); 
 }; 
} 

实际上，Object.create方法还有接受第二个参数的版本，第二个参数表示的是在新创建对象上赋予的一系列属性。

当上述的函数确实使用了new进行调用时，也能够正确地得到返回的新建对象。这得益于构造器覆盖模式(Constructor Override Pattern)。该模式的含义是：使用了new关键字的表达式的返回值能够被一个显式的return覆盖。正如以上代码中使用了return self来显式定义了返回值。

当然，以上的工作在某些情况下也不是必要的。但是，当一个函数是需要被当做构造函数进行调用时，必须对它进行说明，使用文档是一种方式，将函数的命名使用首字母大写的方式也是一种方式(基于JavaScript语言的一些约定俗成)。

以上就是针对javascript的prototype,getPrototypeOf和__proto__进行的深入学习，希望对大家的学习有所帮助。