个人中心
gpt4 book ai didi

JS创建自定义对象的六种方法总结

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 37 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章JS创建自定义对象的六种方法总结由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

1、创建一个 Object 实例

?
1
2
3
4
5
6
7
8
var person = new Object();
person.name = "rose" ;
person.age = 18;
person.job = "actor" ;
person.sayName = function () {
  console.log( this .name);
};
console.log(person);

2、对象字面量

?
1
2
3
4
5
6
7
8
9
var person = {
  name: "rose" ,
  age: 18,
  job: "actor" ,
  sayName: function () {
  console.log( this .name);
  },
};
console.log(person);

上面两种方式是创建对象的两种基本方式，他们的原型就是 Object 。

3、工厂模式

?
1
2
3
4
5
6
7
8
9
10
11
12
function createPerson(name,age,actor){
  var person = new Object();
  person.name = "rose" ;
  person.age = 18;
  person.job = "actor" ;
  person.sayName = function () {
   console.log( this .name);
  };
  return person
}
console.log(p1 instanceof Object); //true
console.log(p1 instanceof createPerson); //false

从上面代码中我们可以看出来，工厂模式实际上就是借助函数，内部返回使用第一种方式（ new Object()）创建的对象.

优点：可以很方便的创建相似对象.

缺点：没有解决对象识别的问题，即怎样知道一个对象的类型.

4、构造函数方式

?
1
2
3
4
5
6
7
8
9
10
11
function Person(name, age, job) {
  this .name = name;
  this .age = age;
  this .job = job;
  this .sayName = function () {
  console.log( this .name);
  };
}
var p = new person( "rose" , 18, "actor" );
console.log(p instanceof Person); //true
console.log(p instanceof Object); //true

构造函数可以创建特定类型的对象，像 Object , Array 这样的原生构造函数，在运行时会自动出现在执行环境中.

构造函数模式与工厂模式的不同之处为:

  1. 没有显式得创建对象，
  2. 直接将属性和方法赋值给了this对象
  3. 没有return语句

构造函数方式创建对象必须使用 new ，操作符，会经历下面四个步骤 。

  1. 创建一个对象
  2. this指向这个新创建的对象
  3. 执行代码
  4. 返回这个对象

构造函数方式的优点：以构造函数创建的对象，在其原型上都会有一个 constructor 属性，这个属性指向构造函数 Person 而这个属性最初是用来标识数据类型的.

忧化 。

?
1
2
3
4
5
6
7
8
9
10
function Person(name, age, job) {
  this .name = name;
  this .age = age;
  this .job = job;
  this .sayName = sayName;
}
function sayName(){
  console.log( this .name);
}
var p = new person( "rose" , 18, "actor" );

缺点：当对象需要很多方法的时候，就会定义多个全局作用域下的函数，这样一来，不仅毫无封装性可言，而且让全局作用域下的函数过多.

5、原型模式

?
1
2
3
4
5
6
7
8
9
function Person() {}
Person.prototype.name = "rose" ;
Person.prototype.age = 18;
Person.prototype.sayName = function () {
  console.log( this .name);
};
var p = new Person();
console.log(p);

说到原型对象就要说一下原型链，原型与原型链对象如下图所示:

JS创建自定义对象的六种方法总结

我们可以看到，在prototype上面定义的所有属性都是在其原型对象上。在原型对象上的属性与方法属于公有属性和公有方法。其所有实例都可以访问到.

6、**组合使用构造函数模式和原型模式 ** 最常用

?
1
2
3
4
5
6
7
8
9
function Person(name, age) {
  this .name = name;
  this .age = age;
}
Person.prototype.sayName = function () {
  console.log( this .name);
};
var p = new Person( "rose" , 18);
console.log(p);

JS创建自定义对象的六种方法总结

对象在引用其属性的时候，会按照原型链去查找，直到查找到Object的原型.

总结

到此这篇关于JS创建自定义对象的六种方法的文章就介绍到这了,更多相关JS创建自定义对象方法内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我！ 。

原文链接：https://juejin.cn/post/6906311962842365966 。

最后此篇关于JS创建自定义对象的六种方法总结的文章就讲到这里了,如果你想了解更多关于JS创建自定义对象的六种方法总结的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

37 4 0
文章推荐： 浅谈javascript事件环微任务和宏任务队列原理
文章推荐： 台式电脑没有无线网卡怎么连接手机热点?
文章推荐： 返回上一个url并刷新界面的js代码
文章推荐： 笔记本电脑开机黑屏电源灯有亮的解决方法
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com