이번에는 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
小结
对象具有许多考验开发者的一些知识点。能够完全理解并整理出来是不容易的。后续我会针对对象的继承
객체 만들기
Function 선언 Object.create
Literal objectjavascript 언어 수준을 통해 개체의 인스턴스를 빠르게 생성
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!