快捷導(dǎo)航

JavaScript面向?qū)ο缶幊虒?shí)現(xiàn)模擬

更新時(shí)間：2022年10月14日 09:25:44 作者：愛思考的豬

面向?qū)ο缶幊?Object Oriented Programming)將現(xiàn)實(shí)世界中的復(fù)雜關(guān)系抽象成一個(gè)個(gè)對(duì)象,通過對(duì)象之間的分工合作對(duì)現(xiàn)實(shí)世界進(jìn)行模擬

前言

每個(gè)對(duì)象都是一個(gè)功能中心,具有明確分工,可以處理信息,處理信息,發(fā)出信息。面向?qū)ο缶幊叹哂徐`活性、可復(fù)用性、模塊化等好處,適合更多合作完成的大型項(xiàng)目。

1. 構(gòu)造函數(shù)

構(gòu)造函數(shù)的功能是生成對(duì)象,生成具有相同結(jié)構(gòu)對(duì)象的函數(shù)。Java語(yǔ)言通過類實(shí)現(xiàn)面向?qū)ο?對(duì)象是類的實(shí)例,而Javascript則是通過構(gòu)造函數(shù)作為對(duì)象的模板,使用prototype實(shí)現(xiàn)繼承。

構(gòu)造函數(shù)的幾個(gè)特點(diǎn)

構(gòu)造函數(shù)內(nèi)部使用了this關(guān)鍵字作為被生成的對(duì)象
構(gòu)造函數(shù)配合new 操作符使用
構(gòu)造函數(shù)的第一個(gè)字符一般大寫用來區(qū)分普通函數(shù)
構(gòu)造函數(shù)默認(rèn)返回一個(gè)新對(duì)象(this),如果手動(dòng)返回值是引用數(shù)據(jù)類型會(huì)覆蓋默認(rèn)的返回值

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的過程

生成一個(gè)新對(duì)象綁定給this
將新對(duì)象的原型設(shè)置為構(gòu)造函數(shù)的prototype屬性
執(zhí)行代碼,往this上添加屬性
返回this

2.1 基礎(chǔ)使用

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'}

直接執(zhí)行構(gòu)造函數(shù)會(huì)怎么樣？

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

構(gòu)造函數(shù)的this指向了window,并沒有返回一個(gè)對(duì)象,我們現(xiàn)在做以下兼容:

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

現(xiàn)在可以直接使用了

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

2.2 new.target

在函數(shù)內(nèi)部都可以使用new.target,如果函數(shù)是通過new.target調(diào)用的則返回被調(diào)用的構(gòu)造函數(shù)否則返回undefined

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

現(xiàn)在使用new.target進(jìn)行構(gòu)造函數(shù)的兼容

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

3. 手動(dòng)實(shí)現(xiàn)一個(gè)構(gòu)造函數(shù)

  function myNew() {
      const args = Array.prototype.slice.call(arguments);
      const construct = args.shift();
      //創(chuàng)建this,并將原型設(shè)置為構(gòu)造函數(shù)的prototype
      const context = Object.create(construct.prototype);
      //執(zhí)行構(gòu)造函數(shù),注意這里參數(shù)是數(shù)組形式所以使用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}

到此這篇關(guān)于JavaScript面向?qū)ο缶幊虒?shí)現(xiàn)模擬的文章就介紹到這了,更多相關(guān)JS面向?qū)ο髢?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: