JavaScript面向对象编程实现模拟

前言

每个对象都是一个功能中心,具有明确分工,可以处理信息,处理信息,发出信息。面向对象编程具有灵活性、可复用性、模块化等好处,适合更多合作完成的大型项目。

1. 构造函数

构造函数的功能是生成对象,生成具有相同结构对象的函数。Java语言通过类实现面向对象,对象是类的实例,而Javascript则是通过构造函数作为对象的模板,使用prototype实现继承。

构造函数的几个特点

• 构造函数内部使用了this关键字作为被生成的对象

• 构造函数配合new 操作符使用

• 构造函数的第一个字符一般大写用来区分普通函数

• 构造函数默认返回一个新对象(this),如果手动返回值是引用数据类型会覆盖默认的返回值

function Person(name ){
 this.name = name;
};
const jack = new Person('jack'); //Person {name: 'jack'}
function Person(name ){
 this.name = name;
 return name;
};
const jack = new Person('jack'); //Person {name: 'jack'}
function Person(name ){
 this.name = name;
 return ['jack'];
};
const jack = new Person('jack'); //['jack']

2. new的过程

• 生成一个新对象绑定给this

• 将新对象的原型设置为构造函数的prototype属性

• 执行代码,往this上添加属性

• 返回this

2.1 基础使用

function Person(name ){
 this.name = name;
};
const jack = new Person('jack');
const tom = new Person('tom');
console.log(jack); //Person {name: 'jack'}
console.log(tom); //Person {name: 'tom'}

直接执行构造函数会怎么样？

function Person(){
 this.name = name;
};
const jack = Person('jack'); //undefined

构造函数的this指向了window,并没有返回一个对象,我们现在做以下兼容:

function Person(name){
if(!(this instanceof Person)){
 return new Person(name);
};
this.name = name;
};

现在可以直接使用了

Person(name); //Object { name: "jack" }

2.2 new.target

在函数内部都可以使用new.target,如果函数是通过new.target调用的则返回被调用的构造函数否则返回undefined

function Person(){
 console.log(new.target);
};
new Person(); //function Person(){...}
Person(); //undefined

现在使用new.target进行构造函数的兼容

function Person(name){
     if(!(new.target === Person)){
          return new Person(name);
     };
     this.name = name;
   };
   console.log(Person('jack')); //Object { name: "jack" }

3. 手动实现一个构造函数

function myNew() {
     const args = Array.prototype.slice.call(arguments);
     const construct = args.shift();
     //创建this,并将原型设置为构造函数的prototype
     const context = Object.create(construct.prototype);
     //执行构造函数,注意这里参数是数组形式所以使用apply
     construct.apply(context, args);
     //返回
     const res = construct();
     if ((typeof res === 'object' || res === 'function') && typeof res !== 'null') {
       return res;
     } {
       return context;
     }
   };
   function Person(name, age) {
     this.name = name;
     this.age = age;
   };
   const jack = myNew(Person, 'jack', 21);
   //Person {name: 'jack', age: 21}

来源：https://blog.csdn.net/qq_44621394/article/details/127102496