正文

JS面向对象编程：从入门到实战，实战Demo解析，轻松掌握核心技巧

/0 浏览量
0430

JavaScript（简称JS）作为一门广泛应用于Web开发的脚本语言，其面向对象编程（OOP）是理解和实现复杂业务逻辑的关键。本篇文章将带领你从JS面向对象编程的入门开始，逐步深入实战，并通过解析实战Demo，让你轻松掌握OOP的核心技巧。

一、JS面向对象编程概述

1. 面向对象编程的基本概念

面向对象编程是一种编程范式，其核心思想是将数据（属性）和行为（方法）封装在一起，形成对象。这种范式使得代码更加模块化、可重用和易于维护。

2. JS中的对象

在JavaScript中，对象是一组无序的键值对集合。每个键值对称为属性，每个属性可以进一步包含方法。

二、JS面向对象编程基础

1. 创建对象

方式一：字面量创建

var person = {
  name: '张三',
  age: 18,
  sayHello: function() {
    console.log('你好，我是' + this.name);
  }
};

方式二：构造函数创建

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function() {
    console.log('你好，我是' + this.name);
  };
}

var person = new Person('张三', 18);

2. 继承

在JavaScript中，继承可以通过多种方式实现，如原型链继承、构造函数继承、组合继承等。

原型链继承

function Parent() {
  this.name = 'parent';
}

Parent.prototype.getName = function() {
  return this.name;
};

function Child() {
  this.name = 'child';
}

Child.prototype = new Parent();

var child = new Child();
console.log(child.getName()); // 输出：parent

3. 闭包

闭包是JavaScript中的一个重要特性，它允许函数访问其外部作用域中的变量。

function outer() {
  var a = 10;
  function inner() {
    console.log(a);
  }
  return inner;
}

var func = outer();
func(); // 输出：10

三、实战Demo解析

1. 实战场景：实现一个购物车

需求分析

  • 购物车应包含商品列表、添加商品、删除商品、结算等功能。
  • 商品应包含名称、价格、数量等属性。

实现代码

// 商品类
function Product(name, price) {
  this.name = name;
  this.price = price;
  this.quantity = 1;
}

// 购物车类
function ShoppingCart() {
  this.products = [];
}

ShoppingCart.prototype.addProduct = function(product) {
  this.products.push(product);
};

ShoppingCart.prototype.deleteProduct = function(index) {
  this.products.splice(index, 1);
};

ShoppingCart.prototype结算 = function() {
  var total = 0;
  for (var i = 0; i < this.products.length; i++) {
    total += this.products[i].price * this.products[i].quantity;
  }
  console.log('总计：' + total);
};

// 测试
var cart = new ShoppingCart();
var product1 = new Product('苹果', 3);
var product2 = new Product('香蕉', 2);

cart.addProduct(product1);
cart.addProduct(product2);
cart结算(); // 输出：总计：9

2. 实战场景：实现一个简单的拖拽功能

需求分析

  • 实现一个可拖拽的div元素。
  • 拖拽过程中，div元素跟随鼠标移动。

实现代码

// 获取div元素
var div = document.getElementById('myDiv');

// 设置初始位置
var offsetX = 0;
var offsetY = 0;

// 设置拖拽事件
div.addEventListener('mousedown', function(e) {
  offsetX = e.clientX - div.offsetLeft;
  offsetY = e.clientY - div.offsetTop;
  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('mouseup', onMouseUp);
});

function onMouseMove(e) {
  div.style.left = e.clientX - offsetX + 'px';
  div.style.top = e.clientY - offsetY + 'px';
}

function onMouseUp() {
  document.removeEventListener('mousemove', onMouseMove);
  document.removeEventListener('mouseup', onMouseUp);
}

四、总结

通过本文的学习，相信你已经对JavaScript面向对象编程有了初步的了解。在实际开发中，熟练掌握OOP的核心技巧，能让你写出更加高效、可维护的代码。希望本文能帮助你轻松掌握JS面向对象编程，为你的前端开发之路打下坚实的基础。

-- 展开阅读全文 --