小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
最近在网站上学习了一些面向对象的知识,打算和大家分享一下。
也算是个人的记录总结,后面也会持续更新的。
什么是面向对象?
支持面向对象编程的语言包括:C#、Java、Python、Ruby、JavaScript...
在面向对象中有一些核心的概念:封装、抽象、继承、多态。
...
还是先不讲太多,一点一点记录吧,我们先来了解什么是对象?
对象
1. 创建一个对象 Creating Objects
如何在对象中创建方法,比如我们开始创建一个“圆”的对象,我们可以直接在对象内部定义函数。
在面向对象中会将高度相关的属性封装到 Object
中,所以我会在上面添加半径、坐标等属性。
const circle = {
// 半径(属性)
radius: 1,
// 坐标(属性)
location: {
x = 1,
y = 1
},
// 画(方法)
draw: function() {
console.log('draw');
},
};
我们可以直接使用 circle.draw()
调用对象的方法。
在面向对象中:调用对象的函数 ✖ 调用对象的方法 ✔ (Method)
2. 工厂函数和构造函数 Factories and Constructors
接下来,我们看如何用函数来创建对象吧~~
2.1 Factory Function (工厂函数)
特点:通过创建函数 -> 创建对象,一次定义,多次调用
🐝命名规范:驼峰标记法 (oneTwoThree)
// 还是上面的例子,不过这里我就简单创建一个属性了
function createCircle(radius){
return {
radius,
draw() {
console.log('draw');
}
}
}
// 通过这个函数创建对象
const circle1 = createCircle(1);
const circle2 = createCircle(2);
2.2 Constructor Function (构造函数)
🐝命名规范:帕斯卡标记法 (OneTwoThreeFour)
// 接下来我们用 this 设置对象的属性和方法
function Circle(radius) {
console.log('this',this); //⭐this指向 circle,如果创建对象时没有用new关键字,则this指向 windows
this.radius = radius; //this指向当前脚本的对象
this.draw = function() { //this代表一个空对象
console.log('draw');
}
}
const circle = new Circle(1);
// new 关键字所做的行为:1️⃣创建了一个空对象 2️⃣将this指向给{}空对象 3️⃣返回函数给this所指向的对象
3. 值类型和引用类型 Primitives and Reference Types
首先,我们先来了解什么是值类型 Value
、什么是引用类型 Reference
🐝 值类型 : number
, string
, boolean
, symbol
, undenfined
, null
🐝 引用类型 : Object
, Function
, Array
(变量不是保存在对象中,而是一个地址)
简单的例子😄
let x = { value : 10 };
let y = x; // 此时 x 和 y 都指向address { value : 10 }
x.value = 20;
console.log(y.value); // 20
稍微不简单的例子🤔
let number = 10;
function increase (number) {
number++;
}
increase(number);
console.log(number); // 10
let obj = {value : 10};
function increase (obj) {
obj.value++;
}
increase(obj);
console.log(obj.value); // 11
4. 私有属性 Private Properties
🐝 Hide the details Show the essentials (隐藏细节的复杂的,展示必要的内容)
对象上会有一些方法是不必使用者关心的,我们就可以将一些复杂的方法隐藏在内部处理
// 利用设置变量 let 可实现隐藏细节 let不是对象的属性,将目标设置为本地变量,在离开对象作用域时就会✖
function Circle(radius) {
this.radius = radius;
let defaultLocation = { x: 0, y: 0 }; //本地变量,是函数 draw 的闭包
let computeOptimumLocation = function(factor) {
// ... 细节实现
}; //本地变量,是函数 draw 的闭包
this.draw = function() {
computeOptimumLocation(0.1); //私有成员,不需要this调用
};
}
5. Getters/Setters
我们也可以使用 Object.defineProperty
上的get、set访问和设置属性。
function Circle(radius) {
this.radius = radius;
let defaultLocation = { x: 0, y: 0 };
this.draw = function() {
console.log('draw');
};
Object.defineProperty(this, 'defaultLocation', {
get: function() { //这个变量是内部函数闭包的一部分 ⭐只读属性
return defaultLocation;
},
set: function() { // ⭐外部访问
if (!value.x || !value.y)
throw new Error('Invalid location.');
defaultLocation = value;
}
})
}
最后
今天记录了面向对象中的“对象”🐘🐘,后续也会对文章进行补充的,下一节将记录面向对象中的原型。
文章为学习过程中的理解和记录,欢迎大佬指正呀!!