从零认识面向对象 - Object

362 阅读3分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

最近在网站上学习了一些面向对象的知识,打算和大家分享一下。

也算是个人的记录总结,后面也会持续更新的。

什么是面向对象?

支持面向对象编程的语言包括: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;
    }
  })
}

最后

今天记录了面向对象中的“对象”🐘🐘,后续也会对文章进行补充的,下一节将记录面向对象中的原型。

文章为学习过程中的理解和记录,欢迎大佬指正呀!!