Серия рукописных исходных кодов (3): реализация нового оператора

JavaScript
Серия рукописных исходных кодов (3): реализация нового оператора

Когда мы на самом деле реализуем новый, давайте сначала обратим внимание, каковы функции нового оператора? Только когда мы действительно понимаем функцию нового оператора, мы можем сами реализовать новый оператор.

Что делает новый оператор

Больше говорить бесполезно, давайте узнаем об этом на практических примерах

function Student (name, age){
    this.name = name;
    this.age = age;
}
Student.prototype.id = '110'
let hanson = new Student('hanson',18);
console.log(hanson.name); // 'hanson'
console.log(hanson.id)  //110

Этот код является вводным и его можно понять, он также может лучше объяснить роль нового оператора:

  1. Создается новый экземпляр объекта.
  2. Свойство __proto__ объекта идентично прототипу конструктора (Student) (hanson.__proto === Student.prototype)
  3. Измените это, чтобы указать на вновь созданный объект экземпляра

То есть к объекту экземпляра, реализованному оператором new, можно получить доступ.构造函数свойства, вы также можете получить доступ构造函数原型свойства на .

Реализовать собственную новую функцию

// 代码实现样式
function Student (name, age){
    ....
}
// 通过new函数实现
let hanson1 = new Student(...)
// 创建一个新的myNew函数，自己实现new函数的功能
let hanson2 = myNew(Student,...)

Реализовать собственную новую функцию

function myNew(){
    const obj = new Object();
    Constructor = Array.prototype.shift.call(arguments);
    obj.__proto__ = Constructor.prototype;
    Constructor.apply(obj,arguments);
    return obj;
}

Пояснение выше:

  1. Создайте новый объект и вернитесь. Соответствует функционалу новой функции.
  2. Перехватите первый параметр, переданный функции myNew.
  3. Связывает прототип первого параметра с возвращаемым объектом.
  4. Используя команду apply, измените указатель конструктора this так, чтобы он указывал на новый объект, чтобы obj мог получить доступ к свойствам в конструкторе.
  5. Вернуть объект.

注意：Если вы все еще не можете понять знания о функциях прототипа, пожалуйста, нажмитенаследовать, чтобы понять соответствующие знания.

попытайся

function Student (name, age){
    this.name = name;
    this.age = age;
}
function myNew(){
    const obj = new Object();
    Constructor = Array.prototype.shift.call(arguments);
    obj.__proto__ = Constructor.prototype;
    Constructor.apply(obj,arguments);
    return obj;
}
let newPerson = myNew(Student,'hanson',18);
console.log(newPerson.name) // hanson

Результат такой же, как у нового оператора!

Это закончено?

来自MDN
Это изображение взято из MDN. Посмотрите внимательно на третью вещь, представленную выше.Что, если конструктор показывает, что он возвращает объект?

function Student (name, age){
    this.class= '3.5';
    return {
        name:name,
        age:age
    }
}

let newPerson = new Student('hanson',18)
console.log(newPerson.name) // hanson
console.log(newPerson.class) // undefined

Если конструктор имеет возвращаемое значение, то возвращается только объект, возвращенный конструктором.

function myNew(){
    const obj = new Object();
    Constructor = Array.prototype.shift.call(arguments);
    obj.__proto__ = Constructor.prototype;
    let ret = Constructor.apply(obj,arguments); // 判断构造函数是否存在返回值
    return typeof ret === 'object'? ret : obj;
}

Обычно конструкторы не возвращают значения, но кто может гарантировать, что его не будет?

Если статья была вам полезна, не забудьте поставить лайк и подписаться~

Категории