对象字面量和构造函数创建对象详解

对象字面量创建的是对象,而构造函数创建的是函数对象。为了帮助理解,希望本文能帮助到大家。

1、向原型链上添加属性为什么用prototype,而一般不用__proto__

2、javascript为什么要设置一个函数对象,他的作用是什么

3、更深层次了解原型链

如下两段代码,分别是使用对象字面量和构造函数创建对象。

代码段1:

var a={"name":"nihao"};console.log(a);

登录后复制

代码段2:

var a=function(name){    this.name=name;};var b= new a("nihao");console.log(b);

登录后复制

首先,我们需要知道:

1、函数对象的原型是对象(原型链为:实例,通过new构造函数–>函数对象–>对象–>null)

2、函数有prototype属性,而对象没有

然后,在某些场景下,我们有一个公共的属性,需要多个新建的对象去继承,这个时候就能体现出函数对象的特点了,我们看下代码:

1、使用构造器

var a=function(name){    this.name=name;};a.prototype.sex="nan";var b= new a("nihao");console.log(b);console.log(b.name);console.log(b.sex);var c=new a("test");console.log(c);console.log(c.name);console.log(c.sex);

登录后复制

如上,可以很容易的实现属性或方法的继承,在控制台打印上述代码,可以很容易看到原型链是这样的(以对象b为例):对象b–>函数对象–>对象–>null

2、使用对象字面量

使用对象字面量创建的是对象,他没有prototype属性,所以我们只能通过__proto__,但是在对象上使用__proto__可能会导致一些问题的出现。代码如下:

var a={"name":"nihao"};a.__proto__.sex="nan";console.log(a);console.log(a.name);console.log(a.sex);var b={};console.log(b);console.log(b.name);console.log(b.sex);

登录后复制

如上,运行上面代码,可以很容易得到运行结果:

{name: "nihao"} nihao nan {} undefined nan

登录后复制

哎,这个就很奇怪了,b对象明明设置的为空啊?这是因为在执行a.__proto__.sex=”nan”;时候,程序向对象的原型上添加了一个属性sex,而b是对象也是继承的对象的原型,多以导致了这个问题的出现。

最后,总结下来就是:

函数对象是继承自对象的原型,有了函数对象,我们可以给函数的原型添加属性,这些属性保存在函数对象中,但是又不会影响其他对象。

对象字面量和构造函数创建对象详解

相关推荐:

浅谈js之字面量、对象字面量的访问、关键字in的用法

JavaScript中对这两种对象字面量(json)的操作方式有何不同?

Javascript 中 class、构造函数、工厂函数详解

以上就是对象字面量和构造函数创建对象详解的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2786593.html

(0)
上一篇 2025年3月8日 17:47:06
下一篇 2025年3月2日 06:56:17

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 运动缓冲效果的封装函数示例代码

    之前经常写运动函数,要写好多好多,后来想办法封装起来。(运动缓冲)。本文主要和大家介绍了js实现运动缓冲效果的封装函数,涉及javascript时间函数与数值运算相关操作技巧,需要的朋友可以参考下,希望能帮助到大家。 /*  物体多属性同时…

    编程技术 2025年3月8日
    200
  • 数组函数有哪些用处

    很多时候你可能很纠结,你应该使用reduce更多或者你不应该使用filter,更应该使用map;或者是for,为什么不使用forEach?是不是太纠结了。 事实上呢?数组和数组的迭代函数对于初学者来说都会感到困惑,所以我将试着为每个简化问题…

    编程技术 2025年3月8日
    200
  • JavaScript构造器详解

    对构造函数有很好的理解是你掌握javascript这门语言的重点。我们都知道javascript不像其他语言,它没有class关键字,但是它有跟function非常相似的构造函数。这篇文章我们一起来详细地了解javascript构造函数如何…

    编程技术 2025年3月8日
    200
  • Generator函数详细解析

    generator 函数是 es6 提供的一种异步编程解决方案,语法行为与传统函数完全不同。这篇文章给大家介绍es6 generator函数的相关知识,希望能帮助到大家。 ECMAScript 6 (简称 ES6 )作为下一代 JavaSc…

    编程技术 2025年3月8日
    200
  • js普通函数和构造函数详解

    本文主要和大家分享js普通函数和构造函数,希望能帮助大家更好理解什么是js普通函数和构造函数。 1、构造函数也是一个普通函数,创建方式和普通函数一样,但构造函数习惯上首字母大写 2、构造函数和普通函数的区别在于:调用方式不一样 3、普通函数…

    2025年3月8日 编程技术
    200
  • 前端常用方法函数实例详解

    本文主要和大家分享前端编写过程常用方法函数实例详解,希望能帮助到大家。 1. push() 方法 定义和用法 push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。 语法 arrayObject.push(newelement…

    编程技术 2025年3月8日
    200
  • JS中的常用函数汇总

    这次给大家带来js中的常用函数汇总,使用js中的常用函数的注意事项有哪些,下面就是实战案例,一起来看一下。 //数字每隔三位加’,’,如1000变为’1,000’function numFormat( params ) {    var v…

    编程技术 2025年3月8日
    200
  • 基础的JavaScript知识总结(六)函数、初始作用域(下)

    这次给大家带来基础的javascript知识总结,总共有十一个知识点,基础的javascript知识总结(六)函数、初始作用域(下)下面就是实战案例,一起来看一下。 作用域初探 作用域定义: 变量(变量作用于又称上下文)和函数生效(能被访问…

    编程技术 2025年3月8日
    200
  • JS的日常常用函数整合

    这次给大家带来js的日常常用函数整合,使用js日常常用函数整合的注意事项有哪些,下面就是实战案例,一起来看一下。 直接下载min目录下的lutils.min.js或lutils.full.min.js   推荐根据自己的的实际需求,自行进行…

    编程技术 2025年3月8日
    200
  • js中数组函数和注意事项

    本文主要和大家分享js中数组函数和注意事项,首先我们先和大家分享js 的数组对象有哪些,希望能帮助到大家。 js 的数组对象有哪些 push       — 向数组的末尾添加一个或更多元素,并返回新的长度。 pop        — 删除并…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论