当前位置：首页 > news >正文

day25JS- es5面向对象、Proxy代理对象

news 来源：原创 2025/5/25 10:13:05

1. es5面向对象和继承

1.1 面向对象

1. 1.1 es6面向对象和继承

ES6 (ECMAScript 2015) 引入了基于类的面向对象编程语法，使得 JavaScript 的面向对象编程更加清晰和易于理解。

es6面向对象:<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>1. 父类class Box{// 这个属性属于类的公有属性static b=2;、            // 给两个属性属于实例对象私有的属性a=1name;// 构造器constructor(name){this.name=name;}// 实例方法，这个方法属于实例对象的私有方法play(){console.log("play");}// 静态方法，这个方法属于类的公有方法static run(){console.log("run");}}// 继承2.子类继承父类class Ball extends Box{// 子类的实例化对象私有属性age// 构造器constructor(name,age){// super() 调用父类的构造器super(name);this.age=age;}// 实例方法play(){// super() 调用父类的实例方法super.play();console.log("play1");}// 静态方法,这个方法属于类的公有方法jump(){console.log("jump");}}</script>
</body>
</html>

1.1.2 es5 面向对象

在 ES6 之前，JavaScript (ES5) 使用基于原型的面向对象编程模式。虽然语法不如 ES6 的类语法直观，但功能同样强大。ES5使用函数来定义。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>1. 定义父类function Box1(name){// 构造器this.a=1;this.name=name;}// 给实例化对象的原型上添加一个play方法Object.defineProperty(Box1.prototype,"play",{// value是方法体value(){console.log("play");}})// 给实例化对象的原型上添加一个属性aBox1.prototype.a=2;// 给Box1添加一个静态属性bBox1.b=2;// 给Box1添加一个静态方法runBox1.run = function(){console.log("run");}var obj=new Box1("kwj");console.log(obj);</script>
</body>
</html>

1.2 es5的继承

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>1. 定义父类function Box1(name){// 构造器this.a=1;this.name=name;}// 给实例化对象的原型上添加一个play方法Object.defineProperty(Box1.prototype,"play",{// value是方法体value(){console.log("父类的play方法");}})// 给实例化对象的原型上添加一个属性aBox1.prototype.a=2;// 给Box1添加一个静态属性bBox1.b=2;// 给Box1添加一个静态方法runBox1.run = function(){console.log("父类的run方法");}2. 定义子类// 子类继承父类function Ball1(name,age){this.super(name);this.age=age;}// 给子类的原型上添加一个jump方法和一个play方法Object.defineProperties(Ball1.prototype,{jump:{value(){console.log("子类的jump方法");}},play:{value(){// super() 调用父类的实例方法this.superMethod("play");console.log("子类调用父类play");}}})
-----------------------------------重点区域--------------------------------------3.继承（重点）3.1 subClass:子类，supClass：父类function extend(subClass, supClass) {3，2保留子类的使用属性和方法var proto = subClass.prototype;3.3 把父类的的原型链设置为子类的原型链// Object.setPrototypeOf(subClass.prototype,supClass.prototype);subClass.prototype = Object.create(supClass.prototype);3.4 获取到子类的所有可枚举和不可枚举的属性var names = Reflect.ownKeys(proto);3.5 遍历子类所有的属性for (var i = 0; i < names.length; i++) {// 获取子类的对象属性的描述东西var desc = Object.getOwnPropertyDescriptor(proto, names[i]);Object.defineProperty(subClass.prototype, names[i], desc);}3.6 创建父类的superObject.defineProperties(supClass.prototype, {super: {value(...arg) {supClass.apply(this, arg);}},// 拷贝父类的原型上的方法superMethod: {value(method, ...arg) {supClass.prototype[method].apply(this, arg);}}})7. 实现静态方法的继承Object.setPrototypeOf(subClass, supClass);}extend(Ball1, Box1);----------------------------------------------------------------------------------4. 测试：实例化对象var a=new Box1("kwj1",20);console.log("父类：",a);a.play();var b=new Ba