【JS中面向对象编程】

简介: 【JS中面向对象编程】

对象是包括属性与方法的数据类型,JS中大部分类型都是对象String/Number/Math/RegExp/Date

OOP

  • 对象是属性和方法的集合即封装;
  • 将复杂功能隐藏在内部,只开放给外部少量方法,更改对象内部的复杂逻辑不会对外部调用造成影响即抽象;
  • 继承是通过代码复用减少冗余代码
  • 根据不同形态的对象产生不同结果即多态

基本声明

使用字面量形式声明对象是最简单的方式

let obj = {
  name: '张三',
  get:function() {
    return this.name;
  }
}
console.log(obj.get()); //张三

属性与方法简写

let obj = {
  name:'张三',
  get() {
    return this.name;
  }
};
console.log(obj.get()); //张三

其实字面量形式在系统内部也是使用构造函数 new Object创建的

let obj = {};
let obj2 = new Object();
console.log(obj, obj2);
console.log(obj.constructor);
console.log(obj2.constructor);

操作属性

使用点语法获取

let obj = {
  name: "张三"
};
console.log(obj.name);

使用[] 获取

console.log(obj["name"]);

可以看出使用.操作属性更简洁,[]主要用于通过变量定义属性的场景

let obj = {
  name: "张三"
};
let property = "name";
console.log(obj[property]);

如果属性名不是合法变量名就必须使用扩号的形式了

let obj = {};
user["my-age"] = 28;
console.log(obj["my-age"]);

对象和方法的属性可以动态的添加或删除。

const obj = {
  name: "张三"
};
obj.age = "10";
obj.show = function() {
  return `${this.name}已经${this.age}岁了`;
};
console.log(obj.show());
console.log(obj);
delete obj.show;
delete obj.age;
console.log(obj);
console.log(obj.age); //undefined

对象方法

定义在对象中的函数我们称为方法,下面定义了学生对象,并提供了计算平均成绩的方法

let obj = {
  name: "李四",
  age: 22,
  grade: {
    math: 99,
    english: 67
  },
  //平均成绩
  avgGrade: function() {
    let total = 0,count = 0;
    for (const key in this.grade) {
      total += this.grade[key];
      count++;
    }
    return total / count;
  }
};
console.log(obj.avgGrade());

引用特性

对象和函数、数组一样是引用类型,即复制只会复制引用地址。

let obj = { name: "张三" };
let obj2 = obj;
obj2.name = "李四";
console.log(obj.name); //李四

对象做为函数参数使用时也不会产生完全赋值,内外共用一个对象

let obj = { age: 22 };
function handler(obj) {
  obj.age += 10;
}
handler(obj);
console.log(obj.age); //32

对象的比较是对内存地址的比较所以使用 ===== 一样

let obj = {};
let obj2 = obj;
let obj3 = {};
console.log(obj == obj2); //true
console.log(obj === obj2); //true
console.log(obj2 === obj3); //false

this

this 指当前对象的引用,始终建议在代码内部使用this 而不要使用对象名,不同对象的this只指向当前对象。

let obj = {
  name: "张三",
  show() {
    return this.name;
  }
};
console.log(obj.show()); //张三

展开语法

使用...可以展示对象的结构,下面是实现对象合并的示例

let obj = {name:'张三',age:30};
let info = { ...obj, birthday: "2000-10-10" };
console.log(info);

如果对象中有相同参数,在合并时后面的会替换前面的

function upload(params) {
  let config = {
    type: "*.jpeg,*.png",
    size: 10000
  };
  params = { ...config, ...params };
  console.log(params);
}
upload({ size: 999 });


相关文章
|
5月前
|
存储 前端开发 JavaScript
揭秘原型链:探索 JavaScript 面向对象编程的核心(下)
揭秘原型链:探索 JavaScript 面向对象编程的核心(下)
揭秘原型链:探索 JavaScript 面向对象编程的核心(下)
|
5月前
|
前端开发 JavaScript 开发者
揭秘原型链:探索 JavaScript 面向对象编程的核心(上)
揭秘原型链:探索 JavaScript 面向对象编程的核心(上)
揭秘原型链:探索 JavaScript 面向对象编程的核心(上)
|
5月前
|
存储 JavaScript 前端开发
构造函数和原型的结合应用:轻松搞定JS的面向对象编程(三)
构造函数和原型的结合应用:轻松搞定JS的面向对象编程
|
5月前
|
设计模式 JavaScript 前端开发
构造函数和原型的结合应用:轻松搞定JS的面向对象编程(一)
构造函数和原型的结合应用:轻松搞定JS的面向对象编程
|
7天前
|
JavaScript 前端开发 Java
js面向对象编程|24
js面向对象编程|24
|
5月前
|
存储 JavaScript 前端开发
构造函数和原型的结合应用:轻松搞定JS的面向对象编程(二)
构造函数和原型的结合应用:轻松搞定JS的面向对象编程
|
4月前
|
JavaScript 前端开发 Java
使用JavaScript进行面向对象编程的指南
使用JavaScript进行面向对象编程的指南
31 4
|
4月前
|
前端开发 JavaScript 安全
TypeScript作为一种静态类型的JavaScript超集,其强大的类型系统和面向对象编程特性为微前端架构的实现提供了有力的支持
【6月更文挑战第11天】微前端架构借助TypeScript提升开发效率和代码可靠性。 TypeScript提供类型安全,防止微前端间通信出错;智能提示和自动补全加速跨代码库开发;重构支持简化代码更新。通过定义公共接口确保一致性,用TypeScript编写微前端以保证质量。集成到构建流程确保顺利构建打包。在微前端场景中,TypeScript是强有力的语言选择。
44 2
|
4月前
|
JavaScript 前端开发
深入解析JavaScript中的面向对象编程,包括对象的基本概念、创建对象的方法、继承机制以及面向对象编程的优势
【6月更文挑战第12天】本文探讨JavaScript中的面向对象编程,解释了对象的基本概念,如属性和方法,以及基于原型的结构。介绍了创建对象的四种方法:字面量、构造函数、Object.create()和ES6的class关键字。还阐述了继承机制,包括原型链和ES6的class继承,并强调了面向对象编程的代码复用和模块化优势。
43 0
|
5月前
|
JavaScript 前端开发
【JavaScript技术专栏】JavaScript中的面向对象编程
【4月更文挑战第30天】本文介绍了JavaScript中的面向对象编程,包括对象的基本概念、创建对象的方法(字面量、构造函数、Object.create()和ES6的class)及继承机制(原型链和ES6的class继承)。面向对象编程通过抽象为对象,实现了代码复用和模块化,提高了程序的可读性和可维护性。
25 0
下一篇
无影云桌面