JavaScript面向对象OOP

已于 2023-07-31 15:17:58 修改
阅读量93 收藏
点赞数
文章标签： javascript 前端 开发语言 vscode
于 2023-05-22 16:25:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Chris__Feng/article/details/130768032
版权

abstrict

JS中没有传统的类，使用构造函数模拟

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上，返回 true / false

this指向所创建的类 ，因此可以使用this.属性名，创建属性

构造函数会自动 return 返回

const Animals = function (animal, food) {
  console.log(this);		//Animals()
  this.animal = animal;		//属性名可以随意定义
  this.food = food;
};

const cat = new Animals("Cat", "fish");
const dog = "Dog";
console.log(cat instanceof Animals);		//true
console.log(dog instanceof Animals);		//false

Way 2 ：

class Animals {
  constructor(animal, food, birthYear) {
    this.animal = animal;
    this.food = food;
    this.birthYear = birthYear;
  }

  calAge() {
    console.log(2023 - this.birthYear);
  }
}
const dog = new Animals("dog", "bone", 2020);
dog.calAge();		//3

链接protoType

console.log(Animals.prototype);

Animals.prototype.likes = function (likes) {
  console.log("wool");
};

console.log(cat.__proto__);
console.log(cat.__proto__ === Animals.prototype); //true

console.log(Animals.prototype.isPrototypeOf(cat)); //true
console.log(Animals.prototype.isPrototypeOf(dog)); //false

console.log(cat.hasOwnProperty("animal")); //true

set 与 get

调用原型数据，进行阻挡操作

const account = {
    owner: "Chris",
    movements: [200, 530, 120, 300],
    //   number: 10,

    get latest() {
        return this.movements;
    },

    set changeNum(num) {
        return num > 10 ? alert("Good") : alert("Bad");
    },
};
console.log(account.latest);
account.changeNum = 99;


// DEMO 2
// 定义一个对象构造函数
function Person(name) {
    this.name = name;
}

// 在原型中定义属性 age，并为其设置 get 和 set 函数
Object.defineProperty(Person.prototype, "age", {
    get: function () {
        return this._age;
    },
    set: function (value) {
        if (value >= 0 && value <= 120) {
            this._age = value;
        } else {
            console.log("Invalid age value");
        }
    }
});

// 创建对象实例
var person = new Person("John");

// 设置年龄属性
person.age = 30;

// 获取年龄属性
console.log(person.age);


// DEMO 3
var obj = {
    _name: '',

    get name() {
        return this._name
    },

    set name(value) {
        this._name = value.toUpperCase()
    }
}

obj.name = 'Chris'
console.log(obj.name);

Object.create

用于创建一个新对象，该对象的原型链由指定的原型对象和属性和方法描述符组成。

// Object 创建
const Person = {
    init(name, birthYear) {
        this.name = name;
        this.birthYear = birthYear;
    },
    calAge(birthYear) {
        // console.log(2023 - this.birthYear);
        return 2023 - this.birthYear;
    },
};

console.log('查看原型');
console.log(Person);

const Chris = Object.create(Person);

// Chris.name = "Chris";
// Chris.birthYear = 2001;
Chris.init("Chris", 2001);

console.log('查看Chris原型');
console.log(Chris);
console.log(Chris.calAge());
// Chris.calAge();
console.log(Chris.__proto__ === Person);


//   DEMO 2
// 创建一个空对象 obj，它的原型为 null
var obj = Object.create(null);

// 创建一个对象 person，它的原型为 Object.prototype
var person = Object.create(Object.prototype);

// 创建一个对象 student，它的原型为 person 对象
var student = Object.create(person);

// 在 student 对象上定义属性和方法
student.name = "John";
student.age = 25;
student.sayHello = function () {
    console.log("Hello, my name is " + this.name);
};

// 调用 student 对象的方法
student.sayHello(); // 输出 "Hello, my name is John"

Object.create与new区别

new

使用 new 运算符调用构造函数时，会创建一个新的对象，并将构造函数中的 this 关键字绑定到新对象上,同时，新对象会继承构造函数原型上的属性和方法

new 运算符创建的对象会通过原型链继承构造函数的原型上的属性和方法。每个对象都有一个隐藏的属性 proto，指向其构造函数的原型。如 john.proto 指向 Person.prototype。这样可以访问构造函数原型上的属性和方法。

function Person(name, age) {
  this.name = name;
  this.age = age;
}
var john = new Person("John", 30);

Object.create()

在给定的原型对象的基础上创建一个新对象。它接受一个参数，用于指定对象的原型

Object.create() 方法创建的对象也会通过原型链继承原型对象的属性和方法，但不会与构造函数或原始对象有直接的联系。例如，john.proto 指向 personPrototype。

var personPrototype = {
  greet: function() {
    console.log("Hello!");
  }
};
var john = Object.create(personPrototype);

继承

关注原型链是否被更改，当更改后，初始原型链的方法会全部丢失

解决方案： 再修改原型链后，重新添加方法，但如果父类有相同函数名称，则会以子类为主

const Person = function (firstName, birthYear) {
    this.firstName = firstName;
    this.birthYear = birthYear;
};

Person.prototype.calcAge = function () {
    console.log(2037 - this.birthYear);
};

// 子类
const Student = function (firstName, birthYear, course) {
    // console.log(this);
    // this 实现继承
    Person.call(this, firstName, birthYear);
    this.course = course;
};

Student.prototype.introduce = function () {
    console.log(`My name is ${this.firstName} and I study ${this.course}`);
};

// 1. 解决不能调用introduce方法，在分配后再创建新属性
// 2. 分配前调用，原型链被修改，instroduce不在存在
Student.prototype = Object.create(Person.prototype);
// Student.prototype.constructor = Student;

// Student.prototype.introduce = function () {
//     console.log(`My name is ${this.firstName} and I study ${this.course}`);
// };

// 未修改前原型链
// const Merry = new Student("Merry", 2001, "Computer");
// Merry.introduce()
// 连接原型，将calcAge附加到Student中,



const Chris = new Student("Chris", 2001, "Computer");


console.log(Chris);
console.log('修改后的原型指向--------------------');

Chris.calcAge();
// introduce调用失败，因为已经不再原型上
// Chris.introduce()

// console.log(Person.prototype);
// console.log(Student.prototype);

//全部继承
// console.log(Chris instanceof Student);
// console.log(Chris instanceof Person);
// console.log(Chris instanceof Object);

// 修改原型链指向
// console.log(Student.prototype.constructor); //Person，因为Student的原型链指向为Person
Student.prototype.constructor = Student;
console.log(Student.prototype.constructor); //Student



// DEMO 2
class first {
    constructor(name) {
        this.name = name
    }
}

class second {
    constructor(name) {
        this.name = name
    }
}

const firstPro = new first('Tom')
second = firstPro        //原型链断开,直接赋值，导致原型链混乱，数据会同时更改

second.name = 'Chris'
console.log(firstPro);
console.log(second);


// DEMO 3
// 父类
function Animal(name) {
    this.name = name;
}

Animal.prototype.sound = function () {
    console.log("Animal sound");
};

// 子类
function Cat(name) {
    Animal.call(this, name); // 调用父类构造函数
}

// 设置原型继承
Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;

// 子类方法
Cat.prototype.sound = function () {
    console.log("Meow"); // 子类的声音
};

// 创建实例
var myCat = new Cat("Tom");
console.log(myCat.name); // 输出: Tom
myCat.sound(); // 输出: Meow

super

用于调用父类的构造函数、普通方法、静态方法。它通常用于子类继承父类时使用

在构造函数中，调用super会执行父类的构造函数，从而完成对父类属性的初始化。如果子类在调用super之前使用this关键字，那么此时父类的属性还未被初始化，会导致错误。

在静态方法中，由于静态方法是类级别的方法，而非实例级别的，因此无法通过实例调用父类的静态方法。所以，需要使用super关键字来调用父类的静态方法。

// 用于调用父类的构造函数、普通方法、静态方法。它通常用于子类继承父类时使用。
class Animals {
    constructor(name) {
        this.name = name
    }

    sayHello() {
        console.log('Hello World');
    }

    static Hi() {
        console.log("Hi !!!");
    }
}

class dog extends Animals {
    constructor(name, toys) {
        super(name)
        this.toys = toys
    }

    sayGoodBye() {
        super.sayHello()
        console.log("GoodBye World");
    }

    static Holo() {
        super.Hi()
        console.log('Holo !! ');
    }
}

const d = new dog('lili', 'Bone')
console.log(d);
d.sayGoodBye()
// 类名调用静态类
dog.Holo()

类继承与super使用

class PersonCl {
  constructor(fullName, birthYear) {
    this.fullName = fullName;
    this.birthYear = birthYear;
  }

  // static method
  static hey() {
    console.log("Hey World 👨‍👨‍👦");
  }
}

// 继承类
class studentCl extends PersonCl {
  constructor(fullName, birthYear, course) {
    super(fullName, birthYear);
    this.course = course;
  }

  introduce() {
    console.log(`My name is ${this.fullName} and I study ${this.course}`);
  }
}

const Chris = new studentCl("Chris", 2001, "Computer Science");
Chris.introduce();

封装

# == private，对变量or方法进行封装

外部调用私有方法：

  1. 浏览器报错 ： Private field ‘#calAge’ must be declared in an enclosing class

  2. vaCode报错 ： Property ‘#calAge’ is not accessible outside class ‘Animals’ because it has a private identifier.

class Animals {
    // public fields
    local = navigator.language;

    // private fields
    #toys = [];
    constructor(name, birthYear, food) {
        this.birthYear = birthYear;
        this.food = food;
        this.name = name;
    }

    // public methods
    calToys(toy) {
        this.#toys.push(toy);
        return this;
    }

    // private methods
    #calAge(birthYear) {
        this.birthYear = 2023 - birthYear;
    }

    outAge(birthYear) {
        this.#calAge(birthYear);
    }
}

const dog = new Animals("dog", 2012, "bone");
dog.calToys("tennis");
dog.calToys("flying disc")
console.log(dog.calToys("flying disc"));
// // console.log("private methods" + dog.#calAge);		//报错

// console.log(dog);

chaining链接方法

需要对与每一个方法返回this指向，否则报错，Cannot read properties of undefined

// public methods
calToys(toy) {
    this.#toys.push(toy);
    return this;
}
    
dog.calToys("shoes").outAge(2020);		//  3
黎の明Dawn
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
面向对象 OOP es6 Class 类
爱睡的虫虫
02-06 228
面向对象编程 （Object Oriented Programming） 单例设计模式 单例模式解决的问题 高级单例模式 基于单例模式实现模块化开发 工厂模式 单例设计模式 1、表现形式 （对象） var obj = { xxx:xxx }; 2、作用 把描述同一件事务的属性和特性进行 分组，归类（存储在一个堆内存空间中）。因此避免了全局变量之间的冲突和污染 var pa...
javascript 面向对象OOP笔记
weixin_33871366的博客
11-01 76
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>OOP</title> <script type="text/javascript"> function myOOP()...
JavaScript基础，面向对象编程（OOP)
蜡笔不新的博客
11-14 231
​ ①方法的封装：在类内部的私有方法，无法在类外部调用即为封装​ ②属性的封装：类中的属性私有化，不能“对象名.属性名”访问（设有get/set方法）
JavaScript面向对象
weixin_55101030的博客
09-21 1223
JavaScript面向对象
JS面向对象OOP
面对疾风吧
08-17 262
Javascript是一种基于对象（object-based）的语言， 你遇到的所有东西几乎都是对象。但是，它又不是一种真正的面向对象编程（OOP）语言，因为它的语法中没有class（类）。 但是ES6新增了类这个概念。 一、 生成实例对象的原始模式 假定我们把花看成一个对象，它有"名字"和"产地"两个属性。 创建一个对象有两种方法： <script type="text/javascrip...
JavaScript 面向对象编程思想
m0_59075169的博客
09-26 697
JavaScript 面向对象编程思想
JavaScript面向对象(OOP)
xiaochengxuyuan1的博客
01-26 258
前 言 JRedu 面向对象程序设计（简称OOP）是现在最流行的程序设计方法，这种方法有别于基于过程的程序设计方法。在写面向对象的WEB应用程序方面JavaScript是一种很好的选择.它能支持OOP.因为它通过原型支持继承的方式和通过属性和方法的方式一样好.很多开发者试图抛弃JS,试着用C#或JAVA仅是因为JS不是他认为合适的面向对象的语言.许多人还没有认识到javascript支持继承.当你写面向对象的代码时.它能给你很强大的能量.你也可以使用它写出可复用,可封装的代码. 一、什么是面向对象编程(O
JavaScript中的OOP面向对象编程
qq_44621394的博客
09-29 492
面向对象编程(Object Oriented Programming)将现实世界中的复杂关系抽象成一个个对象,通过对象之间的分工合作对现实世界进行模拟。每个对象都是一个功能中心,具有明确分工,可以处理信息,处理信息,发出信息。面向对象编程具有灵活性、可复用性、模块化等好处,适合更多合作完成的大型项目。
js的面向对象oop
paidaboluo的博客
12-10 242
三大特性：封装性、继承性、多态性 面向对象是相对于面向过程的。 面向过程就是亲力亲为，事无巨细，面面俱到，步步紧跟，有条不紊 面向对象就是找一个对象，指挥得结果 面向对象将执行者转变成指挥者 面向对象不是面向过程的替代，而是面向过程的封装 面向对象的几个重点： constructor指向实例的构造函数 instanceof：对象.instanceof.类 检测对象是否为右边类的实例 原型：prototype每一个构造函数都有一个 prototype 属性，指向另一个对象。这个对象的所.
JavaScript面向对象编程
weixin_29396791的博客
07-11 179
面向对象   面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式。它使用先前建立的范例，包括模块化，多态和封装几种技术。今天，许多流行的编程语言（如Java，JavaScript，C＃，C+ +，Python，PHP，Ruby和Objective-C）都支持面向对象编程（OOP）。 相对于 “一个程序只是一些函数的集合，或简单的计算机指令列表。”的传统软件设计观念而言，面向对象编程可...
JavaScript OOP面向对象介绍
10-28
### JavaScript OOP面向对象介绍 #### 一、面向对象编程（OOP）概念 面向对象编程（Object-Oriented Programming，简称OOP）是一种程序设计思想。它将计算机程序视为一组对象的集合，而每个对象都可以接收其他对象...
JavaScript面向对象(OOP)语法.doc
08-04
JavaScript的面向对象编程（Object-Oriented Programming, OOP）是一种强大的编程范式，它允许开发者模拟现实世界中的实体，并通过对象来表示和操作这些实体。JavaScript作为一种动态类型的脚本语言，完全支持OOP...
Javascript OOP之面向对象
10-21
Javascript是一种基于对象（object-based）的语言，你遇到的所有东西几乎都是对象。但是，它又不是一种真正的面向对象编程（OOP）语言，因为它的语法中没有class（类）。
JavaScript 面向对象基础简单示例
10-16
JavaScript是一种基于原型的面向对象编程语言...你可以通过阅读更多的JavaScript面向对象教程，学习错误调试技巧，以及数据结构和算法来深化你的理解。通过实践和不断探索，你将能够熟练掌握JavaScript的面向对象编程。
05_ Electron 自定义菜单、主进程与渲染进程通信
最新发布
所学所思
08-09 501
单独写在一个 js 文件中，然后再在主进程中引入labe: "文件",submenu: [label: "新建文件",},label: "编辑",submenu: [label: "复制",},submenu: [// main.js// 1、引入初始化remote 模块width:800,})// __dirname 表示获取我们当前目录， path.join 会将两个参数合并成 d://electrondemo/index.html// 打开调试模式。
【Vue3】图片未加载成功前占位
菜就多练
08-08 274
原生img标签可以通过自定义指令解决< template > < img class = " image_item-img " v-preload = " ' loading' " src = " https://xx " alt = " 加载失败 " /> < script setup > import {reactive } from 'vue' // 自定义图片占位 const vPreload = {
社交媒体分享预览图片和内容修改
wangweiscsdn的博客
08-06 226
社交媒体分享链接时的预览图片和内容
Typescript配置文件(tsconfig.json)详解系列六：allowImportingTsExtensions
zzyp1927314的博客
08-05 502
如果不使用的时候，在导入文件的时候需要加上typescript编译后的文件后缀。如果使用了就不能输出编译文件，只能输出声明文件（*.d.ts）。
创建一个简单的贪吃蛇游戏：HTML、CSS和JavaScript教程
Mr_Zhangyuge的博客
08-08 1023
在本教程中，我们将逐步构建一个简单的贪吃蛇游戏。这个项目适合初学者，可以帮助你理解HTML、CSS和JavaScript的基础知识，并掌握如何将它们结合起来创建一个完整的游戏。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值