详解js创建对象的几种方式和对象方法

这篇文章是看js红宝书第8章，记的关于对象的笔记（第二篇）。

创建对象的几种模式：

工厂模式：

工厂是函数的意思。工厂模式核心是定义一个返回全新对象的函数。

 function getObj(name, age) {
  let obj = {}
  obj.name = name
  obj.age = age
  return obj
 }
 let person1 = getObj("cc", 31)

缺点：不知道新创建的对象是什么类型

构造函数模式：

通过一个构造函数，得到一个对象实例。
构造函数和工厂模式区别是：
1，构造函数函数体加了this
2，构造函数没有return
3，构造函数调用时，用new关键字

 function CreateObj(name, age) {
  this.name = name
  this.age = age
 }
 let person1 = new CreateObj("cc", 31)
 console.log(person1)
 console.log(person1.constructor === CreateObj); // true
 console.log(person1 instanceof CreateObj); // true

关于构造函数的两个问题：

1，构造函数和普通函数唯一区别是调用方式。构造函数要用new关键字。如果不用new，则是往Global对象上加属性。下面例子中，CreateObj方法，往window对象上加了name和age属性

 function CreateObj(name, age) {
  this.name = name
  this.age = age
 }
 CreateObj('cc', 10)
 console.log(window.name) // 'cc'

2，构造函数存在的问题: 构造函数体内的方法，每次创建一个实例，都会创建一遍。

person1.sayName( ) === person2.sayName( ) // false

解决方法是，将sayName定义在createObj外面。

 function sayName() {
  console.log(this.name)
 }
 function CreatePerson(name, age) {
  this.name = name
  this.age = age
  this.sayName = sayName
 }
 let person1 = new CreatePerson('joy', 31)
 person1.sayName()

但是，这样会让自定义类型引用的代码不能很好聚在一起。

原型模式：

原理是，每个函数都有一个prototype属性。prototype是一个对象，里面定义的属性和方法会被所有实例共享。
关于原型模式，有两个等式：

 function Person() { }
 let person1 = new Person()
 console.log(person1.__proto__ === Person.prototype)  // true
 console.log(Person.prototype.constructor === Person); // true

关于原型对象的三个方法：isPrototype ， getPrototypeof，setPrototypeOf, Object.create()

// isPrototypeOf判断构造函数的原型对象是否是实例的原型对象
function Person() {}
 let person1 = new Person()
 console.log(Person.prototype.isPrototypeOf(person1)); // true

// 获取对象的原型对象
 function Person() {}
 let person1 = new Person()
 console.log(Object.getPrototypeOf(person1) === Person.prototype);

// 将某个对象，设为另一个对象的原型对象
 let person1 = {name: "cc"}
 let person2 = {age: 32}
 Object.setPrototypeOf(person1,person2)
 console.log(person1.name, person1.age); // cc 32

// 以某个对象为原型对象，创建一个新对象
let person1 = {name: "cc"}
 let person2 = Object.create(person1)
 person2.age = 30
 console.log(person2.name, person2.age);

当访问一个对象person的name属性时，是按照以下步骤去访问：
1，person上如果有name属性（即便这个属性是null，也会返回null），返回name属性值；没有，继续去原型对象Person.prototype上找
2，如果原型上有name属性，返回原型上name属性值；没有，则返回undefined

判断一个属性是在实例上，还是在原型上，可以用hasOwnProperty

 function Person() {}
 Person.prototype.name = "cc"
 let person1 = new Person()
 console.log(person1.name) // 'cc'
 console.log(person1.hasOwnProperty("name")); // false

判断一个对象上是否有个某个属性，用in操作符

// 对象自身 or 原型上找到，都返回true
function Person() {}
 Person.prototype.name = "cc"
 let person1 = new Person()
 console.log("name" in person1) // true
 console.log(person1.hasOwnProperty("name")); // false

访问对象的属性的方法：

Object.keys( )
for ... in // 继承属性也会遍历出来
Object.getOwnPropertyNames(obj) // 会列出可枚举和不可枚举属性，其他和 Object.keys( )结果一样
Object.getOwnPropertySymbols(obj) // 和getOwnPropertyNames类似，只是仅针对symbol
Reflect.ownKeys(obj) // 和Object.keys( )结果一样

其他访问对象属性和属性值的方法：
Object.values( ) 对象值组成的数组，会省掉Symbol型。
Object.entries( ) 对象键值对组成的数组，会将键，转化成字符串，省掉Symbol型。

 function Person() {}
 Person.prototype.name = "cc"
 let person = new Person()
 person.age = 21
 let sy = Symbol('sy')
 person[sy] = 'smile'
 console.log(Object.values(person)) // [ 21 ]
 console.log(Object.entries(person)) // [ [ 'age', 21 ] ]

到此这篇关于详解js创建对象的几种方式和对象方法的文章就介绍到这了,更多相关js创建对象内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JavaScript创建对象的七种方式(推荐)

    JavaScript创建对象的方式有很多,通过Object构造函数或对象字面量的方式也可以创建单个对象,显然这两种方式会产生大量的重复代码,并不适合量产.接下来介绍七种非常经典的创建对象的方式,他们也各有优缺点. 工厂模式 function createPerson(name, job) { var o = new Object() o.name = name o.job = job o.sayName = function() { console.log(this.name) } return

  • 深入理解JavaScript创建对象的多种方式以及优缺点

    写在前面 这篇文章讲解创建对象的各种方式,以及优缺点. 但是注意: 这篇文章更像是笔记,因为<JavaScript高级程序设计>写得真是太好了! 1. 工厂模式 function createPerson(name) { var o = new Object(); o.name = name; o.getName = function () { console.log(this.name); }; return o; } var person1 = createPerson('kevin');

  • JS对象创建的几种方式整理

    最近一直在看JS高级程序设计这本书,有空来梳理一下几种创建对象的方式.话不多说,直接步入正题. 第一种:Object构造函数创建 var Person = new Object(); Person.name = 'Nike'; Person.age = 29; 这行代码创建了Object引用类型的一个新实例,然后把实例保存在变量Person中. 第二种:使用对象字面量表示法 var Person = {};//相当于var Person = new Object(); var Person =

  • JavaScript创建对象的常用方式总结

    本文实例讲述了JavaScript创建对象的常用方式.分享给大家供大家参考,具体如下: JS中没有类的概念,那么怎么创建对象呢?下面一一来细说! 传统的创建对象的方式: 1.创建Object的实例 var person = new Object(); person.name = "Alice"; person.age = 12; person.showName = function() { alert(this.name); }; 2.对象字面量形式创建单个对象 var person

  • 创建一般js对象的几种方式

    1.对象字面量创建对象 var obj = { a:1,b:2 }; 注意:对象字面量是一个表达式,这种表达式每次运算都会创建并初始化一个新对象,并计算这个新对象的每个属性值.所以如果在循环体内使用对象字面量,每次循环时都会创建新对象. 2.通过new运算符创建对象 var obj = new Object(); //创建空对象 var ary = new Array(); //创建空的数组对象 注意:new运算符后面跟的是一个函数调用,这个函数被称为构造函数.js中原始类型都包含内置的构造函数

  • js中创建对象的几种方式

    js中创建对象的几种方式

    前言 不管是哪门语言,千变万化不离其宗,深入理解其本质,方能应用自如.对应到js,闭包,原型,函数,对象等是需要花费大功夫思考.理解的.本文穿插了js原型和函数的相关知识,讨论了批量创建对象的几种方式以及它们的优缺点. 正文 说起创建对象,最容易想到的便是通过对象字面量方式直接定义一个对象吧,但这种方式只能创建少量,单独且相互间无联系的对象.若要批量创建对象,该如何? 工厂模式 工厂模式非常直观,将创建对象的过程抽象为一个函数,用函数封装以特定接口创建对象的细节.如下所示: function c

  • JS中的函数与对象的创建方式

    创建函数的三种方式 1.函数声明 function calSum1(num1, num2) { return num1 + num2; } console.log(calSum1(10, 10)); 2.函数表达式 var calSum2 = function (num1, num2) { return num1 + num2; } console.log(calSum2(10, 20)); 3.函数对象方式 var calSum3 = new Function('num1', 'num2',

  • JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】

    本文实例总结了JavaScript创建对象方式.分享给大家供大家参考,具体如下: 这里主要是对<JavaScript高级程序设计>第六章(面向对象的程序设计)的总结,书上的这章至少看了4遍是有的.该章主要讲对象的创建与继承.其中创建对象和继承方式至少6种,再加上一些方法属性,很容易搞得晕头转向的.因此有必要对本章的内容理一理,以后忘了也好过来看一看. 由于文章长度的限制,本文主要讲创建对象. 1 创建对象 1.1 一般方法 使用Object或者采用对象字面量的方法. var o = {a: 1

  • 详解js创建对象的几种方式和对象方法

    这篇文章是看js红宝书第8章,记的关于对象的笔记(第二篇). 创建对象的几种模式: 工厂模式: 工厂是函数的意思.工厂模式核心是定义一个返回全新对象的函数. function getObj(name, age) { let obj = {} obj.name = name obj.age = age return obj } let person1 = getObj("cc", 31) 缺点:不知道新创建的对象是什么类型 构造函数模式: 通过一个构造函数,得到一个对象实例. 构造函数和

  • 详解js 创建对象的几种方法

    在js中创建对象的方法可分为6种,分别是:基本模式.工厂模式.构造函数模式.原型模式.组合模式.动态原型模式,接下来分别看下这几种模式的写法吧 一.基本模式 var person = new Object(); person.name = "孙悟空"; person.weapon = "棒子"; person.run = function () { return this.name + "武器是" + person.weapon; } 二.工厂模

  • 详解js创建对象的几种方法及继承

    详解js创建对象的几种方法及继承

    创建对象 通过Object构造函数或对象字面量创建单个对象 这些方式有明显的缺点:使用同一个接口创建很多对象,会产生大量的重复代码.为了解决这个问题,出现了工厂模式. 工厂模式 考虑在ES中无法创建类(ES6前),开发人员发明了一种函数,用函数来封装以特定接口创建对象的细节.(实现起来是在一个函数内创建好对象,然后把对象返回). function createPerson(name,age,job){ var o=new Object(); o.name=name; o.age=age; o.j

  • 详解js中的几种常用设计模式

    工厂模式 function createPerson(name, age){ var o = new Object(); // 创建一个对象 o.name = name; o.age = age; o.sayName = function(){ console.log(this.name) } return o; // 返回这个对象 } var person1 = createPerson('ccc', 18) var person2 = createPerson('www', 18) 工厂函数

  • JS创建对象的四种方式

    JS创建对象的四种方式

    目录 1.通过字面量的方式去创建对象 2.使用new字符创建对象 3.自定构造函数创建对象 4.工厂模式创建对象 创建对象的4种方式: 1.字面量的方式去创建对象 2.使用new字符创建对象 3.自定义构造函数 4.工厂模式创建对象 对象是指:具有属性和方法 1.通过字面量的方式去创建对象 var person1={ name:'柯南', age:12, sex:'男', eat:function(){ console.log("我饿了,想吃饭") }, say:function(){

  • 详解TensorFlow训练网络两种方式

    TensorFlow训练网络有两种方式,一种是基于tensor(array),另外一种是迭代器 两种方式区别是: 第一种是要加载全部数据形成一个tensor,然后调用model.fit()然后指定参数batch_size进行将所有数据进行分批训练 第二种是自己先将数据分批形成一个迭代器,然后遍历这个迭代器,分别训练每个批次的数据 方式一:通过迭代器 IMAGE_SIZE = 1000 # step1:加载数据集 (train_images, train_labels), (val_images,

  • Java详解实现多线程的四种方式总结

    Java详解实现多线程的四种方式总结

    目录 前言 一.四种方式实现多线程 1.继承Thread类创建线程 2.实现Runnable接口创建线程 3.实现Callable接口 4.实现有返回结果的线程 二.多线程相关知识 1.Runnable 和 Callable 的区别 2.如何启动一个新线程.调用 start 和 run 方法的区别 3.线程相关的基本方法 4.wait()和 sleep()的区别 5.多线程原理 前言 Java多线程实现方式主要有四种: ① 继承Thread类.实现Runnable接口 ② 实现Callable接

  • 详解JS中异常与错误处理的正确方法

    目录 简介 1 面向错误编程 1.1 墨菲定律 1.2 先判否 2. js 内置的错误处理 2.1 Error 类 2.2 throw 2.3 try catch 2.4 Promise.catch 3. 错误处理只有一次 总结 简介 首先,这篇文章一定会引起争议,因为对于错误处理从来就没有真正的标准答案,每个人都会有自己的主观意见. 我的理解毕竟也是片面,提出的想法主要是基于个人的经验总结,如果有异议,欢迎交流讨论. 为了能够尽量保持客观,我会将处理思想尽量前置,再围绕处理思想展开. 这样大家

  • 详解vuex数据传输的两种方式及this.$store undefined的解决办法

    这个问题很乌龙,但也很值得记录一下, 原因是main.js中import store时将store的首字母写成了大写. 问题版本的如下所示: import Store from './store' 我大概看了一下, vue似乎不支持在import部分包含带首字母大写的变量,所有import进来的对象必须要小写,我试过把router改成Router, 发现路由部分也会受影响. 这种方式是典型的将vuex值及其中的方法暴露给所有的组件使用, 即将vuex视作一个"全局变量", 但vuex也

  • 详解spring 配置的两种方式：JAVA配置和注解配置

    众所周知,spring自从3.0开始以后,就全面推荐使用配置的方式进行代码编写了,这种方式确实可以避免了之前一个项目里面一大堆XML的情况,毕竟XML的可读性实在不怎么样,而且一会写JAVA,一会写XML,确实还是蛮麻烦的 就目前来说spring的配置方式一般为两种:JAVA配置和注解配置.那么什么的是注解配置呢?什么是JAVA配置呢? //注解配置: @Service @Component @Repository @Controlle //JAVA配置 @Confirguration 相当于s

随机推荐