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__Create object 메소드 리터럴 메소드 새 생성자 함수 선언 Object.create

Literal object

javascript 언어 수준에서 신속하게 객체 인스턴스 생성

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

new constructor

을 통해 내장 객체 생성자 또는 맞춤 기능. 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🎜🎜🎜인스턴스 🎜 🎜🎜 작전 캐릭터, 객체의 프로토타입 체인에 생성자의 프로토타입이 포함되어 있는지 언어 수준 감지 🎜rrreee🎜 instanceof를 시뮬레이션하여 객체의 프로토타입 체인 생성자가 전달된 생성자 __proto__ code> 일부 특정 브라우저에는 사용자에게 노출되는 함수 속성이 있습니다. 🎜rrreee🎜🎜isPrototypeOf 🎜🎜🎜 생성자의 프로토타입 개체가 있는지 여부를 감지하는 데 사용됩니다. 대상 객체의 프로토타입 체인에 있는 생성자. 🎜rrreee🎜객체 프로토타입 가져오기 Object.getPrototypeOf __proto__🎜rrreee🎜객체 프로토타입 설정 Object.create Object.setPrototypeOf🎜🎜🎜Object.create 🎜🎜🎜객체를 반환하고 해당 프로토타입을 설정🎜rrreee🎜 🎜Object.setPrototypeOf 🎜🎜🎜 __proto__ 객체의 암시적 프로토타입을 직접 설정합니다.🎜rrreee🎜위 내용은 제가 모든 사람을 위해 컴파일한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다. 🎜🎜관련글: 🎜🎜🎜JS가 시간 공유 기능을 최적화하는 방법🎜🎜🎜🎜JS는 왼쪽 목록과 오른쪽 목록을 교환하는 기능을 구현합니다.🎜🎜🎜🎜jQuery+ajax 읽기🎜js🎜 및 정렬 방법 자세한 설명🎜🎜

위 내용은 JS의 Object 객체에 대한 프로토타입 개념의 기본(자세한 내용, 한눈에 알 수 있음)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!