JS에서 Object 객체의 프로토타입을 사용하는 방법

이번에는 JS에서 Object 객체의 프로토타입을 사용하는 방법을 알려드리겠습니다. JS에서 Object 객체의 프로토타입을 사용할 때 주의사항은 무엇인가요?

객체 개념

JavaScript에서는 모든 참조 유형이 객체입니다. 예를 들어 function Foo () {}에서 Foo 자체는 객체에 대한 참조입니다.

function Foo () {} 中，Foo本身就是一个对象的引用。

创建对象方式 字面量方式 new 构造函数函数声明 Object.create

字面量对象

javascript语言级别快速创建对象的实例

var obj = {foo: 'foo', bar: 'bar'}; // Object对象字面量
var obj2 = [obj, 'foo', 'bar']; // Array数组字面量
var obj3 = /^[a-zA-Z0-9]$/; // RegExp正则字面量
var obj4 = function(){}; // Function函数字面量

new 构造函数

通过内置对象的构造函数，或者自定义的函数。 使用 new 操作符，创建一个对象，并且执行构造函数方法。

var obj = new Object();
var obj2 = new Array(1000);
var obj3 = new RegExp('^[a-zA-Z0-9]$');
var obj4 = new Function('a', 'b', 'return a + b;');

函数声明

函数声明创造的对象. 函数属于特殊的对象.

function Foo() {}
Foo instanceof Object;
Foo instanceof Function;

Object.create

传入一个对象作为返回对象的原型，创建一个新对象, 并将新对象的原型指向传入的对象中。

var foo = {
 'foo': 'foo',
 'bar': 'bar'
};
var o = Object.create(foo); // o.proto = foo
console.log(o.foo); // o.proto.foo

使用Object.create(null) 可以返回一个字典型对象.

var o = Object.create(null);
o instanceof Object; // return false;
o.toString(); // Uncaught TypeError

对象原型

每一个对象都有一个内置的 proto 属性指向构造它的函数prototype属性. 而构造函数的

prototype.constructor 则指向构造函数本生。一个对象的属性的寻找过程由以下几个部分组成:

寻找对象属性的数据描述符(writable, value)或存取描述符(getter, setter)，如果查询到了，则返回 对应的值。如果查询不到，则进入第2步骤。寻找对象属性的值是否有被显示定义 (可以通过 Object.getOwnPropertyNames)检测，如果对象属性定义了，则返回定义的值。 如果没有，则进入第3步骤。寻找对象的隐藏原型proto对象的属性，规则同1，2步骤。如果还未找到，则重复第3步骤， 直到proto 为null 为止。

具体案例如下图所示:

检测对象原型

测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性

instanceof Object.prototype.isPrototypeOf

instanceof

运算符，语言级别的检测对象的原型链是否包含构造函数的原型

function Foo () {}
Foo instanceof Function; // return true
Foo instanceof Object; // return true

模拟instanceof查找对象的原型链的构造函数是否包含传入的构造函数, proto 在一些特定的浏览器有暴露给用户

function Bar () {}
function isInstanceof (obj, Constructor) {
 if (obj === null) {
 return false;
 }
 // 忽略 string, number, boolean, null, undefined 类型干扰
 if (!~['object', 'function'].indexOf(typeof obj)) {
 return false;
 }
 var prototype = obj.proto;
 while(prototype) {
 if (prototype.constructor === Constructor) {
  return true;
 }
 prototype = prototype.proto;
 }
 return false;
}
isInstanceof(Bar, Function);
isInstanceof(Bar, Object);

isPrototypeOf

构造函数的原型对象自带的函数属性, 用于检测目标对象的原型链中是否存在构造函数的原型对象。

function Baz () {}
var baz = new Baz();
Baz.prototype.isPrototypeOf(baz);
Function.prototype.isPrototypeOf(baz);
Object.prototype.isPrototypeOf(baz);

获取对象原型 Object.getPrototypeOf proto

var o = {};
var prototype = Object.getPrototypeOf(o);
console.log(prototype === Object.prototype); // return true
// 部分浏览器有效
var o2 = {};
console.log(o2.proto === Object.prototype); // return true

设置对象原型 Object.create Object.setPrototypeOf

Object.create

返回一个对象，并设置它的原型

function Foo () {}
 function Bar () {}
 Foo.prototype.foo = 'foo';
 Bar.prototype = Object.create(Foo.prototype); 
 Bar.prototype.constructor = Bar; // 修正原型链的constructor
 var o = new Bar();
 console.log(o.foo); // return foo;
 console.log(o instanceof Bar); // return true

Object.setPrototypeOf

直接设置对象的隐式原型proto

function Foo () {}
 Foo.prototype.name = 'foo';
 var o = Object.create(null);
 Object.setPrototypeOf(o, Foo.prototype);
 console.log(o.name); // return foo

小结

对象具有许多考验开发者的一些知识点。能够完全理解并整理出来是不容易的。后续我会针对对象的继承객체 만들기

메서드 리터럴 메서드 새 Constructor

Function 선언 Object.create

Literal object

javascript 언어 수준을 통해 개체의 인스턴스를 빠르게 생성
rrreee

새 생성자

통해 내장 객체의 생성자 또는 사용자 정의 함수. new 연산자를 사용하여 객체를 만들고 🎜 생성자 메서드를 실행합니다. 🎜rrreee🎜🎜함수 선언🎜🎜🎜함수 선언에 의해 생성된 객체입니다. 함수는 특수 객체에 속합니다.🎜rrreee🎜🎜Object.create🎜🎜🎜객체를 반환된 객체의 프로토타입으로 전달하고, 새 객체를 생성합니다. 그리고 새 객체를 추가합니다. 프로토타입은 전달된 객체를 가리킵니다. 🎜rrreee🎜사전 객체를 반환하려면 Object.create(null)를 사용하세요.🎜rrreee🎜🎜Object 프로토타입🎜🎜🎜모든 객체에는 내장된 proto 속성이 있습니다. 이를 생성한 함수의 prototype 속성과 생성자의 🎜🎜prototype.constructor는 생성자 자체를 가리킵니다. 객체의 속성을 검색하는 과정은 다음과 같은 부분으로 구성됩니다. 🎜🎜객체 속성의 데이터 설명자(쓰기 가능, 값) 또는 액세스 설명자(getter, setter)를 찾는 경우 해당 값이 반환됩니다. 쿼리를 찾을 수 없으면 2단계로 진행하세요. 객체 속성의 값이 명시적으로 정의되어 있는지 확인합니다(Object.getOwnPropertyNames를 통해 감지 가능). 객체 속성이 정의되면 정의된 값이 반환됩니다. 그렇지 않은 경우 3단계로 진행하세요. 객체의 숨겨진 프로토타입 proto 객체의 속성을 찾습니다. 규칙은 1단계와 2단계와 동일합니다. 아직 찾지 못한 경우 proto가 null이 될 때까지 3단계를 반복하세요. 🎜🎜구체적인 사례는 아래와 같습니다.🎜🎜🎜🎜 🎜객체 프로토타입 감지🎜🎜🎜객체의 프로토타입 체인에 생성자의 프로토타입 속성이 있는지 테스트합니다.🎜🎜instanceof Object.prototype.isPrototypeOf🎜🎜🎜instanceof 🎜🎜🎜연산자, 프로토타입 체인이 객체가 존재합니다 생성자 🎜rrreee🎜를 포함하는 프로토타입은 instanceof를 시뮬레이션하여 객체의 프로토타입 체인 생성자가 전달된 생성자를 포함하는지 확인하고 proto는 사용자 🎜에게 노출됩니다. rrreee🎜🎜isPrototypeOf 🎜🎜🎜 생성자의 프로토타입 객체와 함께 제공되는 함수 속성은 대상 객체의 프로토타입 체인에 생성자의 프로토타입 객체가 있는지 감지하는 데 사용됩니다. 🎜rrreee🎜객체 프로토타입 가져오기 Object.getPrototypeOf proto🎜rrreee🎜객체 프로토타입 설정 Object.create Object.setPrototypeOf🎜🎜🎜Object.create 🎜🎜🎜객체 반환 및 프로토타입 설정🎜rrreee🎜 🎜Object.setPrototypeOf 🎜🎜🎜 객체 proto🎜rrreee🎜🎜Summary🎜🎜🎜객체에는 개발자를 테스트하는 많은 지식 포인트가 있습니다. 그것을 완전히 이해하고 정리하는 것은 쉽지 않습니다. 객체 상속에 대해서는 나중에 자세히 소개하겠습니다. 스크립트 하우스를 지원해 주셔서 감사합니다. 🎜🎜이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 🎜🎜추천도서: 🎜🎜🎜Angular2 상위-하위 컴포넌트 통신 방법🎜🎜🎜🎜🎜Node.js의 비대칭 암호화에 대한 자세한 설명🎜🎜

CSS3는 기울기 및 회전 애니메이션 효과를 구현합니다

위 내용은 JS에서 Object 객체의 프로토타입을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!