JavaScript面向对象编程实现模拟

目录

• 前言
• 1. 构造函数
• 2. new的过程
• 2.1 基础使用
• 2.2 new.target
• 3. 手动实现一个构造函数

前言

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

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}

到此这篇关于JavaScript面向对象编程实现模拟的文章就介绍到这了,更多相关JS面向对象内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！