您的当前位置:首页正文

JS中Object对象的原型概念基础(内容详细,一目了然)

2023-11-30 来源:博科教育

创建对象方式 字面量方式 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__ = fooconsole.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 trueFoo 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

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

JS如何优化分时函数

JS实现左右列表互相调换功能

jQuery+ajax读取json并排序方法详解

小编还为您整理了以下内容,可能对您也有帮助:

javascript注释代码的几种方法(图文教程)

为了程序/代码的易读性,基本上每一种编程语言都有注释的功能,javascript也不例外,javascript注释代码有多种形式,本文章向大家介绍javascript注释代码的两种方法,需要的朋友可以参考一下

javascript注释代码一般有两种方法:

单行注释

多行注释

javascript单行注释

单行注释以"//"开头,到改行的末尾结束。下面是javascript单行注释实例:

javascript多行注释

多行注释以 /* 开始,以 */ 结尾。下面的例子使用多行注释来解释代码:

如何解决浏览器不支持javascript

应用注释符号验证浏览器是否支持JavaScript脚本功能.

如果用户不能确定浏览器是否支持JavaScript脚本,那么可以应用HTML提供的注释符号进行验证。HTML注释符号是以“<--”开始以“-->”结束的。如果在此注释符号内编写JavaScript脚本,对于不支持JavaScript的浏览器,将会把编写的JavaScript脚本作为注释处理。

使用JavaScript脚本在页面中输出一个字符串,将JavaScript脚本编写在HTML注释中,如果浏览器支持JavaScript将输出此字符串,如果不支持将不输出此字符串,代码如下:

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

JS中Object对象的原型概念基础(内容详细,一目了然)

12条写出高质量JS代码的方法(教你写出高品质代码)

详细介绍在JS中Map和ForEach的区别

JS 对象(Object)的深入解析—原型属性

上篇文章 JS 对象(Object)的深入解析—私有属性 介绍了对象的私有属性,这篇文章主要讲下对象的原型链属性,这些属性是每个对象都可以访问调用的,好了,废话不多说,开始进入主题。

该原型属性指向Object对象本身

该方法可以用来判断是否是对象的私有属性,如果是则返回true,否则返回false。for...in 遍历私有和原型属性,通过hasOwnProperty和in方法可以判断某个属性是否是原型属性

prototypeObj.isPrototypeOf(object)
检测prototypeObj这个对象是是否在object对象的原型链上。

obj.propertyIsEnumerable(prop)
测试对象的某个属性是否可枚举,返回Boolean。
注意
每个对象都有一个 propertyIsEnumerable 方法。此方法可以确定对象中指定的属性是否可以被 for...in 循环枚举,但是通过 的属性除外。如果对象没有指定的属性,则此方法返回 false 。

比较
数组转化相同

时间转化不同

数字转化不同

valueOf()方法返回对象的原始值。
注意
JavaScript调用valueOf方法将对象转换为原始值。你很少需要自己调用valueOf方法;当遇到要预期的原始值的对象时,JavaScript会自动调用它。

valueOf()重写

JS 对象(Object)的深入解析—原型属性

上篇文章 JS 对象(Object)的深入解析—私有属性 介绍了对象的私有属性,这篇文章主要讲下对象的原型链属性,这些属性是每个对象都可以访问调用的,好了,废话不多说,开始进入主题。

该原型属性指向Object对象本身

该方法可以用来判断是否是对象的私有属性,如果是则返回true,否则返回false。for...in 遍历私有和原型属性,通过hasOwnProperty和in方法可以判断某个属性是否是原型属性

prototypeObj.isPrototypeOf(object)
检测prototypeObj这个对象是是否在object对象的原型链上。

obj.propertyIsEnumerable(prop)
测试对象的某个属性是否可枚举,返回Boolean。
注意
每个对象都有一个 propertyIsEnumerable 方法。此方法可以确定对象中指定的属性是否可以被 for...in 循环枚举,但是通过 的属性除外。如果对象没有指定的属性,则此方法返回 false 。

比较
数组转化相同

时间转化不同

数字转化不同

valueOf()方法返回对象的原始值。
注意
JavaScript调用valueOf方法将对象转换为原始值。你很少需要自己调用valueOf方法;当遇到要预期的原始值的对象时,JavaScript会自动调用它。

valueOf()重写

JS原型和原型链是如何使用的?

JavaScript中的原型和原型链是面向对象编程中的一个重要概念。每个函数都有一个prototype属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。当我们试图访问一个对象的属性时,它不仅仅在该对象上搜寻,还会搜寻该对象的原型,以及原型的原型,依次层层向上搜索,直到找到一个名字匹配的属性或到达原型链的末尾。

原型链是一种链式结构,它是由每个对象的原型对象指向其构造函数的prototype属性所形成的。这种结构使得我们可以从一个地方获取到一个对象的所有属性和方法。

简述js原型链

1.、js的对象可以分为函数对象和普通对象,每个对象都有 proto 属性,但是只有函数对象才有prototype属性(prototype=原型对象)

2、Object是最高级的函数对象,Function、Array、RegExp、Date、Boolean、Number、String等等是第二高级的函数对象,我们自己手写的function是再低一级的函数对象

3、 proto 是一个对象,它指向某一个prototype,并且有2个属性:constructor和 proto

先来看第一种写法

我们声明了一个构造函数Person,并为它的2个实例都定义了sayName方法

如果我们希望所有的实例都有sayName方法,减少重复的定义

可以像下面这么写:(第二种写法)

我们在构造函数Person中定义了一个数据成员和一个函数成员

每当我们创造一个新的Person实例时,都会在内存中单独为它分配私有的空间

也就是说,p1和p2都有自己的name属性和sayName方法

这个name属性和sayName方法是实例自己私有的

在控制台直接打印p1得到如下结果:(第一、第二种写法是等价的)

再来看第三种写法:

这样的话,每个Person实例依然都会有name属性和sayName方法

不同的地方在哪呢?

在控制台直接打印p1得到如下结果:

不难发现,当前这种写法是将sayName定义在Person的原型对象上的

也就是说,sayName方法不再是每个Person实例私有的,而是所有Person实例共享的

这样做 既不影响每个实例打印/输出自己的name值,又可以节省内存

还是相同的例子

当我们在程序中调用 p1.sayName方法时,编译器会 沿着原型链(自底向上) 地寻找原型对象上是否有这个方法

如上图所示,编译器会先从p1自身(最外层)开始找

然后去 p1. proto (即Person的原型对象 = 外层红色方框)里面找

最后再到 p1. proto . proto (即Object的原型对象 = 内层红色方框)里面找

博科教育还为您提供以下相关内容希望对您有帮助:

JS 对象(Object)的深入解析—原型属性

prototypeObj.isPrototypeOf(object) 检测prototypeObj这个对象是是否在object对象的原型链上。obj.propertyIsEnumerable(prop) 测试对象的某个属性是否可枚举,返回Boolean。 注意 每个对象都有一个 propertyIsEnumerable...

JS数据类型之Object(一)对象知识扫盲

所有的JavScript对象至少继承于一个对象,被继承的对象被称为原型。 每个对象可以通过构造函数的 prototype 属性找到原型 或 每个实例对象有一个私有属性 __proto__ 指向原型 方法一: Object.getPrototypeOf() 方法返...

简述js原型链

1.、js的对象可以分为函数对象和普通对象,每个对象都有 proto 属性,但是只有函数对象才有prototype属性(prototype=原型对象)2、Object是最高级的函数对象,Function、Array、RegExp、Date、Boolean、Number、String等等是第二...

js对象,原型与原型链,属性特征

prototype是函数才有的属性 proto 是每个对象都有的属性,但是 proto 不是一个规范属性,只是部分浏览器实现此属性,对应标准属性是[[Prototype]]在js中所有对象都是可扩展的

彻底理解js的原型链

当js在一个对象中找不到需要的属性时,它会到这个对象的父对象上去找,以此类推,这就构成了对象的原型链 。理解js的原型链对使用js的对象非常有帮助。让我们通过一个例子由浅到深地理解原型链:这是我们经常使用的创建...

详解JavaScript基础知识(JSON、Function对象、原型、引用类型)

1、JSON概念:JavaScript对象表示法(JavaScriptObjectNotation),是一种轻量级的数据交换格式特点:易于程序员编写和查看;易于计算机解析和生成数据结构:Object对象格式 {key:value,key:value}Array数组格式 [value,value]Eg: ...

js中什么是原型对象和原型链

function F() {} // F 是一个函数,函数也是对象,而且每个函数都有一个属性叫:"prototype"var o = new F(); // F.prototype 就是 o 的原型对象console.log(o.name);// 输出: undefinedF.prototype.name = ...

js 常见的Object方法

扩展:在vue中通过递归调用此方法,为对象的每一个属性绑定get()、set()方法,实现对象的数据监听 Object.getPrototypeOf(obj) 返回目标对象的 prototype 的值。 给定对象的原型。如果没有继承属性,则返回 [null]

javascript原型,原型链 有什么特点

javascript原型,原型链特点:原型链实现了继承。JS中每个函数都存在有一个原型对象属性prototype。并且所有函数的默认原型都是Object的实例。每个继承父函数的子函数的对象都包含一个内部属性proto。该属性包含一个指针,指向父...

面试问js原型怎么理解

一、基于原型链的继承 1.继承属性 JavaScript 对象是动态的属性“包”(指其自己的属性)。JavaScript 对象有一个指向一个原型对象的链。当试图访问一个对象的属性时,它不仅仅在该对象上搜寻,还会搜寻该对象的原型,以及该...

Top