备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

JavaScript创建对象和封装

2023-08-10 48
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： JavaScript创建对象和封装

创建对象


原型模式与构造模式组合使用

function Person(name,age,salary){
  this.name = name;
  this.age = age;
  this.salary = salary;
  this.people = ["people1","people2"];
}
Person.prototype = {
  constructor:Person,
  sayName:function(){
    console.log(this.name);
  }
}
var p1 = new Person("name1","20","5000");
var p2 = new Person("name2","22","8000");
p1.people.push("people3");
console.log(p1.people);
console.log(p2.people);

运行结果：

Array [ "people1", "people2", "people3" ]
Array [ "people", "people" ]

这是创建对象最常用也是认同度最高的方式，把可共享的方法和属性放在prototype原型对象里面，把实例属性放在构造函数中。

动态原型模式

这种创建对象的模式，只写一个构造函数，而把原型放在构造函数中作为初始化用，这种结构就有点像java创建类一样，也是一种很好的创建对象的模式，我们来看一下：

function Person(name,age,salary){
  this.name = name;
  this.age = age;
  this.salary = salary;
  if(typeof this.sayName != "function"){
    Person.prototype.sayName = function(){
      console.log("Hello, " + this.name);
    }
    Person.prototype.saySalary = function(){
      console.log("My salary is " + this.salary);
    }
  }
}
var p1 = new Person("name1","20","8000");
var p2 = new Person("name2","21","7000");
p1.sayName();
p1.saySalary();
p2.sayName();
p2.saySalary();

运行结果：

Hello, name1  
My salary is 8000 
Hello, name2  
My salary is 7000

这种模式不能用字面量来重写原型。如果你尝试使用下面的代码来编写：

function Person(name,age,salary){
  this.name = name;
  this.age = age;
  this.salary = salary;
  if(typeof this.sayName != "function"){
    Person.prototype = {
      constructor : Person,
      sayName : function(){
        console.log("Hello, " + this.name);
      },
      saySalary : function(){
        console.log("My salary is " + this.salary);
      }
    }
  }
}
var p1 = new Person("name1","20","8000");
var p2 = new Person("name2","21","7000");
p1.sayName();
p1.saySalary();
p2.sayName();
p2.saySalary();

运行结果：

TypeError: p1.sayName is not a function

因为原型的重写是在创建了对象之后进行的，重写后的原型实际上是一个新的原型对象（重新创建一个，原来的还在，它们的constructor都指向Person），而实例的prototype指针还是指向原来的原型对象（里面没有其他属性和方法，因为属性和方法写在新的原型对象上），所以运行的时候，在实例对象中找不到sayName方法，在原型对象中也找不到sayName方法，即sayName未定义，所以在调用p1.sayName()方法时就报错，说sayName不是一个方法。

我们可以看下面的例子来深入理解一下：

function Person(){};
// 在之前创建
var p1 = new Person();
Person.prototype = {
  constructor:Person,
  name:"name1",
  age:"20",
  sayName:function(){
    console.log(this.name);
  }
};
// 在之后创建
var p2 = new Person();
p2.sayName(); //name1
p1.sayName(); //error


基本封装方法


请看下面的例子：

var Person = function(name,age){
  this.name = name;
  this.age = age || "未填写";
  this.hobbys = [];
}
Person.prototype = {
  sayName:function(){
    console.log(this.name);
  },
  sayAge:function(){
    console.log(this.age);
  },
  addHobby:function(hobbys){
    this.hobbys = this.hobbys.concat(hobbys);
  }
}
var person1 = new Person("Jane","20");
var person2 = new Person("TabWeng","21");
person1.addHobby(['sing','drawing']);
person2.addHobby(['football','study','running']);
person1.sayName();
console.log(person1.hobbys.toString());
person2.sayName();
console.log(person2.hobbys.toString());

运行结果：

Jane  
sing,drawing
TabWeng  
football,study,running

JavaScript创建对象，可以共用的属性和方法写在原型上，需要每个实例各自都有的副本的属性和方法放在构造函数中。

现在有个问题，名称的输入不能有数字，要怎么解决呢？解决的方法可以写一个检查名称的函数，这个函数写在原型上。

var Person = function(name,age){
  //校验名称
  if(this.checkName(name)){
    throw new Error("名字 "+name+" 不能存在数字");
  }
  this.name = name;
  this.age = age || "未填写";
  this.hobbys = [];
}
Person.prototype = {
  //校验函数
  checkName:function(name){
    re = /\d/;
    return re.test(name);
  },
  sayName:function(){
    console.log(this.name);
  },
  sayAge:function(){
    console.log(this.age);
  },
  addHobby:function(hobbys){
    this.hobbys = this.hobbys.concat(hobbys);
  }
}
var person1 = new Person("Helen666","20");
var person2 = new Person("TabWeng","21");
person1.addHobby(['sing','drawing']);
person2.addHobby(['football','study','running']);
person1.sayName();
console.log(person1.hobbys.toString());
person2.sayName();
console.log(person2.hobbys.toString());

这段代码中，我们写了一个checkName()函数，来校验名称，暂且只是校验不能有数字吧，然后再构造函数里的第一行代码中进行校验，若校验不通过，则抛出异常。

这里我传入一个名称Helen666，结果抛出如下异常：

Error: 名字 Helen666 不能存在数字

这样就做到了一个基本的封装，实现内部校验。

但是又有个问题，我们还可以这样来定义名称：

var person1 = new Person("Helen","20");
person1.name = "Helen666";
person1.sayName(); //Helen666

这样名称还是可以修改为不合法的名称，于是我们想到用get方法 和set方法来做控制，只能通过set方法来赋值，同时通过set方法进行校验，而通过get方法来获得值。现在的代码修改如下：

// Interface
var People = new Interface("People",["setName","getName","setAge","getAge","addHobby","getHobby","sayName","sayAge"]);
var Person = function(name,age){ //implement People
  this.setName(name);
  this.setAge(age);
  this._hobbys = [];
}
Person.prototype = {
  //校验函数
  checkName:function(name){
    re = /\d/;
    return re.test(name);
  },
  sayName:function(){
    console.log(this._name);
  },
  sayAge:function(){
    console.log(this._age);
  },
  addHobby:function(hobbys){
    this._hobbys = this._hobbys.concat(hobbys);
  },
  getHobby:function(){
    return this._hobbys;
  },
  setName:function(name){
    if(this.checkName(name)){
      throw new Error("名字 "+name+" 不能含有数字");
    }
    this._name = name;
  },
  getName:function(){
    return this._name;
  },
  setAge:function(age){
    this._age = age || "未设置"; 
  },
  getAge:function(){
    return this._age;
  }
}
var person1 = new Person("Helen","20");
person1.addHobby(['sing','drawing']);
function record(person){
  Interface.ensureImplements(person,People);
  person.sayName();
  console.log(person.getHobby().toString());
}
record(person1);

运行结果：

Helen
sing,drawing

首先，这段代码我们使用了接口，定义了People接口，而person来实现这个接口，注意注释的内容。（关于接口，请看这篇 JavaScript使用接口）

其次，我们使用了get方法 和 set方法来取值和赋值，我们可以约定程序员只能通过set来赋值，而在set方法里面我们对所赋予的值进行了校验，以确保准确。但是这仅仅是一种约定，程序员依然可以通过 person1.name = "123" 来赋值，修改内部属性。

为了规范和起到提醒作用，我们把内部属性的命名进行规范，在这些属性前面加上“_”，比如 **_name** 、**_age** ，这样如果程序员要直接修改属性，那么他就必须这样写person1._name = "123"，这明显是一种故意的做法，一般程序员不会这么做，起到规范和提醒的作用。

尽管如此，这种仅仅是用规定进行约束，还是无法阻止通过person1._name进行修改，下面的方法可以做到把内部属性真正做到私有化。


通过闭包进行封装


// Interface
var People = new Interface("People",["setName","getName","setAge","getAge","addHobby","getHobby","sayName","sayAge"]);
var Person = function(name,age){ //implement People
  // 私有变量
  var _name,_age,_hobbys = [];
  this.addHobby = function(hobbys){
    _hobbys = _hobbys.concat(hobbys);
  },
  this.getHobby = function(){
    return _hobbys;
  },
  this.setName = function(name){
    if(this.checkName(name)){
      throw new Error("名字 "+name+" 不能含有数字");
    }
    _name = name;
  },
  this.getName = function(){
    return _name;
  },
  this.setAge = function(age){
    _age = age || "未设置"; 
  },
  this.getAge = function(){
    return _age;
  }
  this.setName(name);
  this.setAge(age);
}
Person.prototype = {
  checkName:function(name){
    re = /\d/;
    return re.test(name);
  },
  sayName:function(){
    console.log(this.getName());
  },
  sayAge:function(){
    console.log(this.getAge());
  }
}
var person1 = new Person("Helen","20");
person1.addHobby(['sing','drawing']);
function record(person){
  Interface.ensureImplements(person,People);
  person.sayName();
  console.log(person.getHobby().toString());
}
record(person1);

在构造函数中，属性不使用this，外部也就无法访问到这个属性，而闭包通过作用域链可以访问到这个属性，那么我们就通过闭包设置了为属性赋值的唯一入口，从而起到了严格校验这些属性的作用。

尽管如此，在构造函数中定义方法很多时候是没必要的，因为这样每创建一个实例，就会产生一个方法的副本，这是需要内存支持的，所以在使用的过程中，如果能用上面的基本封装方法，尽量用，除非对于私有属性有非常严格的校验要求才用闭包这种方法。

文章标签：
Java
JavaScript
前端开发
程序员
关键词：
JavaScript封装
JavaScript创建对象
前端迷
目录
相关文章
你挚爱的强哥
|
19天前
sd.js 2.0封装：更加简化请求传参内容（逐步废弃、逐渐日落2024.01.02）
sd.js 2.0封装：更加简化请求传参内容（逐步废弃、逐渐日落2024.01.02）
你挚爱的强哥
17 0
m0_黎明
|
1月前
|
JavaScript
JS封装节流函数
JS封装节流函数
m0_黎明
15 0
2019ab
|
1月前
uni-app 65egg.js聊天类chat.js封装（二）
uni-app 65egg.js聊天类chat.js封装（二）
2019ab
25 1
淘源码-taoydm168
|
6月前
|
前端开发 JavaScript 数据挖掘
医院LIS管理系统源码，DEV报表、前端js封装、分布式文件存储
云LIS系统还支持质控管理，为实验室提供科学的质量控制机制。用户可以根据需要调整质控参数，并可自动生成质控图表和统计分析报告。提供了数据分析功能，可以通过数据挖掘和分析来发现潜在关联性，为实验室提供更多的参考和决策支持
淘源码-taoydm168
44 0
讓丄帝愛伱
|
5月前
|
JavaScript 安全 前端开发
js创建对象的七种方式
js创建对象的七种方式
讓丄帝愛伱
30 0
2019ab
|
1月前
uni-app 66聊天类chat.js封装（三）
uni-app 66聊天类chat.js封装（三）
2019ab
27 6
2019ab
|
1月前
uni-app 64聊天类chat.js封装（一）
uni-app 64聊天类chat.js封装（一）
2019ab
22 2
路宇
|
8月前
|
JavaScript 前端开发
JavaScript 使用对象字面量创建对象、使用new Object创建对象
JavaScript 使用对象字面量创建对象、使用new Object创建对象
路宇
74 0
东方睿赢
|
4月前
|
JavaScript 前端开发
函数：函数是JS的基本组成单元，用于封装代码块以实现特定功能。理解函数的定义、调用和参数传递方式非常重要。
函数：函数是JS的基本组成单元，用于封装代码块以实现特定功能。理解函数的定义、调用和参数传递方式非常重要。
东方睿赢
29 0
东方睿赢
|
4月前
|
JavaScript 前端开发
js函数：函数是JS的基本组成单元，用于封装代码块以实现特定功能。理解函数的定义、调用和参数传递方式非常重要。具体案例详解
js函数：函数是JS的基本组成单元，用于封装代码块以实现特定功能。理解函数的定义、调用和参数传递方式非常重要。具体案例详解
东方睿赢
33 1

热门文章

最新文章

  • 1
    JavaScript基础语法（codewhy版本）（一）
  • 2
    JavaScript 权威指南第七版（GPT 重译）（三）(1)
  • 3
    JavaScript高级笔记-coderwhy版本（六）
  • 4
    JavaScript 权威指南第七版（GPT 重译）（六）(4)
  • 5
    JavaScript 权威指南第七版（GPT 重译）（四）(4)
  • 6
    JavaScript 权威指南第七版（GPT 重译）（二）(1)
  • 7
    JavaScript 权威指南第七版（GPT 重译）（六）(3)
  • 8
    JavaScript 权威指南第七版（GPT 重译）（三）(2)
  • 9
    报错/ ./node_modules/axios/lib/platform/index.js Module parse failed: Unexpected token (5:2)怎么解决？
  • 10
    在Blazor中使用Chart.js快速创建图表
  • 1
    监控内网电脑软件设计与实现：基于Node.js的服务器端架构分析
    105
  • 2
    Java Script 中的垃圾回收机制有哪些缺点
    13
  • 3
    描述 JavaScript 中的垃圾回收机制。
    20
  • 4
    如何使用 JavaScript 操作 DOM？
    15
  • 5
    解释 JavaScript 中的`map()`、`filter()`和`reduce()`方法的用途。
    19
  • 6
    JavaScript 中的数组方法有哪些？
    10
  • 7
    JS设置日期为0时0分0秒
    28
  • 8
    JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
    24
  • 9
    JavaScript随手笔记 --- 用正则表达式匹配字符串是否为运算公式
    21
  • 10
    深入理解JavaScript中的闭包与作用域链
    9

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程

    • 相关电子书

    更多
  • JavaScript函数
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 面向对象-1：类的定义
  • 对象和接口-2：常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）