JS面向对象

时间:2022-10-15 爱思考的猪人气:0

前言

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

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}

加载全部内容