Всем известно, что прототипы и цепочки прототипов — одна из самых классических проблем в JavaScript, а конструкторы — это основа прототипов и цепочек прототипов, поэтому понимание конструктора и процесса его выполнения в первую очередь может помочь нам изучить прототипы и прототипы лучше, зная цепочки.
В этой статье мы обсудим конструкторы со следующих аспектов:
1. Что такое конструктор
2. Зачем использовать конструктор
3. Процесс выполнения конструктора
4. возвращаемое значение функции-конструктора
1. Что такое конструктор
В JavaScript, сnewключевое слово для вызова функции, называемой конструктором.
2. Зачем использовать конструктор
Изучите каждую концепцию, не только что это такое, но и почему, и какую проблему она решает.
Например, мы хотим ввести класс первого класса в личной информации каждого студента, то мы можем создать некоторые объекты, такие как:
var p1 = { name: 'zs', age: 6, gender: '男', hobby: 'basketball' };
var p2 = { name: 'ls', age: 6, gender: '女', hobby: 'dancing' };
var p3 = { name: 'ww', age: 6, gender: '女', hobby: 'singing' };
var p4 = { name: 'zl', age: 6, gender: '男', hobby: 'football' };
// ...
像上面这样，我们可以把每一位同学的信息当做一个对象来处理。但是，我们会发现，我们重复地写了很多无意义的代码。 Напримерname、age、gender、hobby.如果这个班上有60个学生，我们得重复写60遍。
В это время пределы конструктора отражены. Мы обнаружили, что хотя у каждого студентаname、gender、hobbyЭти свойства, но все они разные, то мы передаем эти свойства как параметры конструктора. Так как все они первокурсники,ageВ основном им 6 лет, так что можем писать до смерти, а можем заниматься этим отдельно в случае особых обстоятельств. На этом этапе мы можем создать следующую функцию:
function Person(name, gender, hobby) {
this.name = name;
this.gender = gender;
this.hobby = hobby;
this.age = 6;
}
При создании вышеуказанной функции мы можем пройтиnewВызов по ключевому слову, то есть для создания объекта через конструктор.
var p1 = new Person('zs', '男', 'basketball');
var p2 = new Person('ls', '女', 'dancing');
var p3 = new Person('ww', '女', 'singing');
var p4 = new Person('zl', '男', 'football');
// ...
На этом этапе вы обнаружите, что создание объектов становится очень удобным. Таким образом, хотя процесс инкапсуляции конструктора будет более хлопотным, после успешной инкапсуляции нам будет очень легко создать объект, поэтому мы используем конструктор.
При использовании литералов объектов для создания серии объектов одного типа эти объекты могут иметь некоторые схожие характеристики (атрибуты) и поведение (методы).
3. Процесс выполнения конструктора
Давайте сначала поговорим о некоторых основных понятиях.
function Animal(color) {
this.color = color;
}
Когда создана функция, мы не знаем, что это не конструктор, даже если, как и вышеприведенный пример, имя функции капитализировано, мы не можем определить. Только когда функция сnew关键字来调用的时候，我们才能说它是一个构造函数。 Как следующее:
var dog = new Animal("black");
Ниже мы обсуждаем только во время выполнения конструктора, этоnew
function Person(name, gender, hobby) {
this.name = name;
this.gender = gender;
this.hobby = hobby;
this.age = 6;
}
var p1 = new Person('zs', '男', 'basketball');
В этом случае конструктор выполнит следующую процедуру:
(1) когдаnewПри вызове ключевого слова создается новое пространство памяти, помеченное как экземпляр Animal.
Внутри (2) тело функцииthisУказывая на память
Через два вышеуказанных шага мы можем сделать такой вывод.
var p2 = new Person('ls', '女', 'dancing'); // 创建一个新的内存 #f2
var p3 = new Person('ww', '女', 'singing'); // 创建一个新的内存 #f3
Всякий раз, когда создается экземпляр, создается новое пространство памяти (#f2, #f3).Когда создается #f2, this внутри тела функции указывает на #f2, а когда создается #f3, это внутри тела функции Point на #f3.
(3) Выполнить код в теле функции
Из приведенного выше объяснения вы можете понять, что добавление свойства к this эквивалентно добавлению свойства к экземпляру.
(4) возвращает это по умолчанию
Из-за внутреннегоthisУкажите на вновь созданное пространство памяти, возврат по умолчаниюthis, что эквивалентно возврату объема памяти по умолчанию, который равен #f1 на приведенном выше рисунке. На данный момент пространство памяти #f1 является переменнымp1принятый. то естьp1Эта переменная, которая содержит адрес памяти #f1, также помечена как экземпляр Person.
Выше приведен весь процесс выполнения конструктора.
4. Возвращаемое значение конструктора
Последним шагом в процессе выполнения конструктора является возврат по умолчанию.this.言外之意，构造函数的返回值还有其它情况。下面我们就来聊聊关于构造函数返回值的问题。
(1) Возвращаемое значение не добавляется вручную, оно возвращается по умолчанию.
function Person1() {
this.name = 'zhangsan';
}
var p1 = new Person1();
Как упоминалось выше, давайте рассмотрим его снова. Во-первых, при использованииnewПри вызове ключевого слова создается новое пространство памяти #f11, которое помечается как экземпляр Person1; затем внутри тела функцииthisУказание на пространство памяти #f11;выполняется внутри тела кодов функций;функция за счет внутреннего телаthisУказывает на пространство памяти, которое, в свою очередь, используется переменнойp1Получил такp1будет одинnameсвойство, значение свойства «чжансан».
p1: {
name: 'zhangsan'
}
(2) вручную добавить базовый тип данных возвращаемого значения, в конечном итоге верните это
function Person2() {
this.age = 28;
return 50;
}
var p2 = new Person2();
console.log(p2.age); // 28
p2: {
age: 28
}
Если вышеприведенное вызывает обычную функцию, возвращаемое значение равно 50.
(3) Вручную добавить комплексное значение возврата типа данных (объектов), в конечном итоге возвращает объект
прямой пример
function Person3() {
this.height = '180';
return ['a', 'b', 'c'];
}
var p3 = new Person3();
console.log(p3.height); // undefined
console.log(p3.length); // 3
console.log(p3[0]); // 'a'
другой пример
function Person4() {
this.gender = '男';
return { gender: '中性' };
}
var p4 = new Person4();
console.log(p4.gender); // '中性'
Что касается возвращаемого конструктором значения, то это не что иное, как описанные выше ситуации, можете попробовать и запомнить.
Наконец, чтобы подвести итог, эта статья знакомит с конструкторами с четырех аспектов, а конструкторы являются основой для изучения прототипов и цепочек прототипов, поэтому каждому необходимо потратить некоторое время на изучение конструкторов, я расскажу об этом в следующей статье. Цепочка прототипов, понятная каждому, так что следите за обновлениями.
И последнее, но не менее важное: то, что я сказал, не обязательно верно, вы должны попробовать сами!
(Конец этой статьи)