返回

ES5 面向对象:你不知道的技巧与妙招

前端







## 前言

大家好,我是 **[你的名字]** ,一名前端开发工程师。今天,我想和大家分享一些关于 ES5 面向对象的技巧和妙招。这些技巧将帮助你写出更优雅、更易读的代码。

## 创建对象

在 ES5 中,有两种创建对象的方法:

1. 使用对象字面量

const person = {
name: 'John Doe',
age: 30,
greet: function() {
console.log(Hello, my name is ${this.name}.);
}
};


2. 使用 `new` 

function Person(name, age) {
this.name = name;
this.age = age;
this.greet = function() {
console.log(Hello, my name is ${this.name}.);
};
}

const person = new Person('John Doe', 30);


## 继承对象

在 ES5 中,可以使用原型链实现对象继承。原型链是指一个对象指向其父对象的对象引用链。

function Person(name, age) {
this.name = name;
this.age = age;
}

Person.prototype.greet = function() {
console.log(Hello, my name is ${this.name}.);
};

function Employee(name, age, salary) {
Person.call(this, name, age);
this.salary = salary;
}

Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;

const employee = new Employee('John Doe', 30, 100000);
employee.greet(); // Hello, my name is John Doe.


## 使用原型链

原型链可以用来访问父对象的方法和属性。例如,在上面的例子中,`Employee` 对象继承了 `Person` 对象的 `greet()` 方法。因此,`Employee` 对象可以使用 `greet()` 方法。

const employee = new Employee('John Doe', 30, 100000);
employee.greet(); // Hello, my name is John Doe.


## 使用闭包

闭包是指能够访问其他函数作用域的变量的函数。闭包可以用来实现一些特殊的效果,例如:

1. 创建私有变量

function Person() {
let name = 'John Doe';

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

const person = new Person();
console.log(person.getName()); // John Doe


2. 实现延迟执行

function delay(time, callback) {
setTimeout(callback, time);
}

delay(1000, function() {
console.log('Hello, world!');
});


## 使用代理

代理是一种可以拦截对象属性访问和修改的特殊对象。代理可以用来实现一些特殊的效果,例如:

1. 验证数据

const person = new Proxy({}, {
set: function(obj, prop, value) {
if (prop === 'age' && value < 0) {
throw new Error('Age cannot be negative.');
}

obj[prop] = value;

}
});

person.age = 30; // OK
person.age = -1; // Error: Age cannot be negative.


2. 缓存数据

const cache = new Proxy({}, {
get: function(obj, prop) {
if (prop in obj) {
return obj[prop];
}

const value = calculateValue(prop);
obj[prop] = value;
return value;

}
});

const result = cache.getValue('foo');


## 结语

以上就是 ES5 面向对象的技巧和妙招。希望这些技巧能够帮助你写出更优雅、更易读的代码。如果你还有任何问题,请随时留言。

## 参考资料

* [JavaScript 面向对象编程](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)
* [闭包](https://developer.mozilla.org/zh-CN/docs/Glossary/Closure)
* [代理](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy)