Предисловие: Скажи, кликни, тебе нравится моя улыбка! ! ! Всем привет, меня зовут Си Ле (ну, очень натурал и не гей), студент на пенсии, который любит путешествовать на мотоцикле. После знакомства с css в классе я влюбился в внешний интерфейс.Ниже приведены некоторые из моих учебных заметок, стоящих на плечах предшественников, делящихся своим пониманием, пожалуйста, дайте мне больше советов. Пол мужской (хахахаха, меня не ударить)
Что такое объект в JavaScript?
В книге по продвинутому программированию js говорится, что ECMA-262 определяет объект как «набор неупорядоченных свойств, свойства которых могут содержать базовые значения, объекты или функции». Каждое свойство или метод объекта имеет имя, и каждое имя может быть сопоставлено со значением, парой имя-значение. Мое внутреннее чувство, что это (здесь пропущено 10 000 слов)
Когда я впервые увидел это предложение, я был в тумане. Фактически, мы можем рассматривать объект как автомобиль. Как только ключ от машины (функция или объект) соответствует машине (базовому значению), после установления такой базовой концепции не так уж сложно продолжать понимать свойства данных и свойства доступа. Атрибут data похож на бензин, а атрибут accessor на двигатель (не беспокойтесь, эта машина никогда не потечет масло в течение 10 000 километров после запуска, так что если вы ее купите, это точно не убыток, так что давайте приступим к делу ), залейте бензин в машину (тип данных), двигатель (Атрибут доступа имеет функцию определения способа обработки данных) и начните работать, а потом можете сопровождать свою вторую половинку в романтическую Турцию.Я слышал, что передок все красивые, красивые и высокооплачиваемые молодые братья и сестры.Мастера фронтенда учатся.
Когда у вас есть партнер, вы можете иметь человека, который будет сопровождать вас, чтобы ходить по магазинам, есть пищу, которую вы хотите есть в течение длительного времени, вместе ходить в кино и так далее.
Когда у вас есть партнер, вы можете вести себя с ним как избалованный ребенок и жаловаться на обиды, даже если вопрос был решен, вы все равно можете получить утешение от другой стороны. Вы можете показать слабость, вам не нужно делать все смело.
Когда есть партнер, даже если два человека остаются дома, они очень счастливы, они могут делать многое, и что бы они ни делали, есть еще один человек, которого можно разделить, и иногда они будут хвалиться другим. любовь человека.
Когда есть субъект, когда на улице дождь, можно попросить субъекта забрать вас и дать вам зонт. Или вы можете позвонить в Дуданг, когда столкнетесь с чем-то снаружи.
Итак, как важно иметь объект. Позвольте мне научиться создавать объекты в JavaScript
Ввиду длины страницы, заинтересованные друзья могут собрать ее и смотреть не спеша.Проходя мимо красивых парней и красавцев, дайте небольшую похвалу, писать не легко, а маленькие дадут вам набор ударов, чтобы помочь тебе.
Восемь способов создания объектов
Шаблон конструктора объекта (Mercedes-Benz) Шаблон буквального объекта (BMW) Шаблон фабрики (Audi) Шаблон конструктора (Land Rover) Шаблон прототипа (Volkswagen) Шаблон конструктора и комбинация прототипа (Bugatti Veyron) Шаблон динамического прототипа (Rolls Royce) Шаблон паразитического конструктора ( Макларен)
- Может быть, вы спросите, почему сзади добавлена марка автомобиля, ведь каждый раз, когда я узнаю способ создания объектов, кажется, что я владею этой машиной, хахаха, простите меня за фантазирование.
Шаблон конструктора объектов
var person = new Object();
person.name = "Jhonha";
person.age = '27';
person.job = 'dancer';
person1.sayName = function () {
console.log(this.name);
}
person1.sayName(); // Jhonha
console.log(person1.age); // 27
Если конструктор не возвращает значение, он по умолчанию возвращает новый экземпляр объекта. Добавляя оператор return в конце конструктора, вы можете переписать возвращаемое значение при вызове конструктора.
Буквенный режим объекта
var person = {
name: 'Jhonha',
age: 22,
job: 'dancer',
sayName: function () {
console.log(this.name);
}
}
person2.sayName(); // dancer
Хотя для создания одного объекта можно использовать как конструкторы объектов, так и литералы объектов, у этих методов есть очевидный недостаток, заключающийся в том, что создание множества объектов для интерфейса может привести к большому количеству повторяющегося кода.
заводской узор
function createPerson(name, age, job) {
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function () {
console.log(this.name);
};
return o;
}
var person1 = createPerson('Jhonha', 22, 'dancer');
var person2 = createPerson('Ciris', 22, 'Software engineer');
console.log(person1.name); // Jhonha
console.log(person2.name); // Ciris
优点：解决了创建多个相似对象的问题，函数封装创建对象，
无需写重复创建对象的代码
缺点：没有解决对象识别的问题（怎么样知道一个对象类型） 那要怎么办，
让我们继续往下学习吧。
Шаблон конструктора
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.sayName = function () {
console.log(this.name);
}
}
var person1 = createPerson('Jhonha', 22, 'dancer');
var person2 = createPerson('Ciris', 22, 'Software engineer');
console.log(person1.name); // Jhonha
console.log(person2.name); // Ciris
В этом примере функция Person() заменяет функцию createPerson(). Мы заметили, что код в Person() имеет следующие отличия, в дополнение к тем же частям, что и в createPerson().
* 没有明显的创建对象
* 直接将属性和方法赋给了 this 对象
* 没有return语句
Чтобы создать новый экземпляр человека, вы должны использовать новый оператор, выполнив четыре шага.
* 创建一个新对象
* 将构造函数的作用域付给了新对象（因此this指向了这个新对象）
* 执行构造函数的代码（为这个新对象添加属性）
* 返回新对象
В конце предыдущего примера, person1 и person2 содержат разные экземпляры Person Оба объекта имеют свойство конструктора, указывающее на Person.
console.log(person1.constructor === Person); // true
console.log(person2.constructor === Person); // true
Все объекты, которые мы создаем в этом примере, являются экземплярами Object, а также экземплярами Person, что можно проверить с помощью оператора instanceof.
console.log(person1 instanceof Object); // true
console.log(person1 instanceof Person); // true
console.log(person2 instanceof Object); // true
console.log(person2 instanceof Person); // true
Единственная разница между конструкторами и другими функциями заключается в способе их вызова. Однако конструкторы в конце концов являются функциями, и специального синтаксиса для определения конструкторов не существует. В качестве конструктора можно использовать любую функцию, если она вызывается через оператор new.
// 当作构造函数使用
var person = new Person("Jhonha", 27, "dancer");
person.sayName(); //"Jhonha"
// 作为普通函数调用
Person("Ciris", 22, "software engineer"); // 添加到window
window.sayName(); //"Ciris"
// 在另一个对象的作用域中调用
var o = new Object();
Person.call(o, "Kristen", 25, "Nurse");
o.sayName(); //"Kristen"
Оптимизация шаблона конструктора
function Person(name) {
this.name = name;
this.sayName = sayName;
}
function sayName() {
console.log(this.name);
}
var person1 = new Person('Jhonha');
console.log(person1.name);// Jhonha
var person2 = new Person('Ciris');
console.log(person2.name);// Ciris
преимущество: Исправлена ошибка, из-за которой каждый метод приходилось создавать заново.
недостаток: Объекты person1 и person2 совместно используют одну и ту же функцию sayName() в глобальной области, но функции, определенные в глобальной области, на самом деле могут быть вызваны только определенным объектом, что делает преимущества глобальной области нереальными. Определяемый объект Многие методы должны определять множество глобальных функций, поэтому наш пользовательский ссылочный тип вообще не имеет инкапсуляции. К счастью, эти проблемы можно решить с помощью шаблона прототипа.
Спасибо, что посмотрели это, вы можете отдохнуть после долгого просмотра
режим прототипа
function Person(){}
Person.prototype = {
constructor : Person,
name: "Jhonha",
age : 29 ,
job: "Software Engineer",
sayName: function(){
return this.name;
}
};
var person1 = new Person();
console.log(person1.name); // Jhonha
console.log(person1.age); // 29
console.log(person1.job); // Software Engineer
console.log(person1.sayName()); // Jhonha
Плюсы: у каждой создаваемой нами функции есть свойство-прототип, которое является указателем на объект, назначение которого состоит в том, чтобы содержать свойства и методы, которые могут быть общими для всех экземпляров определенного типа. Если понимать буквально, прототип — это объект-прототип экземпляра объекта, созданного путем вызова конструктора. Преимущество использования объекта-прототипа заключается в том, что все экземпляры объекта могут совместно использовать содержащиеся в нем свойства и методы.
Недостатки: не передавать параметры инициализации в конструктор, все экземпляры получат одинаковое значение по умолчанию, при использовании свойств прототипа просто изменение одного экземпляра повлияет на все экземпляры, например, изменение массива в одном экземпляре.
Прикрепляя картинку, я надеюсь помочь вам укрепить ваше понимание конструкторов, прототипов и примеров.
Объединение шаблона конструктора и шаблона прототипа
Наиболее распространенный способ создания пользовательских типов — использование комбинации шаблона Constructor и шаблона Prototype. Шаблон Constructor используется для определения свойств экземпляра, а шаблон Prototype используется для определения методов и общих свойств. В результате у каждого экземпляра будет своя копия свойств экземпляра, но при этом общая ссылка на метод, что в наибольшей степени экономит память.
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.friends = ["Jhonha","Nick"]
}
Person.prototype = {
constructor: Person,
sayName: function () {
console.log(this.name);
}
}
var person1 = new Person('bob', 22, 'frontend');
var person2 = new Person('lynn', 22, 'doctor');
person1.friends.push("Van");
console.log(person1.friends); // Jhonha Nick Van
console.log(person2.friends); // Jhonha Nick
console.log(person1.name); // bob
console.log(person2.name); // lynn
console.log(person1.sayName === person2.sayName); // true
В этом примере свойства экземпляра определяются в конструкторе, а конструктор свойств и метод sayName(), общие для всех экземпляров, определяются в прототипе. И изменение person1.friends (добавление к нему новой строки) не влияет на person2.friends, потому что они из разных массивов.
Этот режим смешивания конструкторов и прототипов в настоящее время является наиболее широко используемым и признанным методом создания определенных типов в ECMAScript.
Спасибо, что вы есть, спасибо, что вы есть, поставьте лайк, спасибо
Шаблон динамического прототипа
function Person(name, age, obj) {
this.name = name;
this.age = age;
this.obj = obj;
console.log('typeof this.sayName: ', typeof this.sayName);
// 检测sayName 是不是一个函数
// 实际上只在当前第一次时候没有创建的时候在原型上添加sayName方法
if (typeof this.sayName != 'function') {
Person.prototype.sayName = function () {
return this.name;
}
}
}
//因为构造函数执行时，里面的代码都会执行一遍，而原型有一个就行，不用每次都重复，所以仅在第一执行时生成一个原型，后面执行就不必在生成，所以就不会执行if包裹的函数，
//其次为什么不能再使用字面量的写法，我们都知道，使用构造函数其实是把new出来的对象作用域绑定在构造函数上，而字面量的写法，会重新生成一个新对象，就切断了两者的联系！
var person1 = new Person('bob', 22, 'frontend');
var person2 = new Person('lynn', 22, 'doctor');
console.log(person1.name); // bob
console.log(person2.name); // lynn
console.log(person1.sayName()); // bob
console.log(person2.sayName()); // lynn
console.log(person1.sayName === person2.sayName); // true
Увидев это, некоторые друзья могут спросить: какова роль использования if в режиме динамического прототипа? В чем проблема или недостаток неиспользования оператора if?
1. Первый вопрос: Person — это конструктор, который генерирует объекты-экземпляры через new Person(...). Всякий раз, когда создается объект Person, код внутри Person вызывается один раз. Если каждый раз, когда вы создаете new (то есть каждый раз, когда создается экземпляр объекта), вы будете переопределять новую функцию, а затем вешать ее на свойство Person.prototype.sayName. На самом деле вам нужно определить его только один раз, потому что все экземпляры будут использовать это свойство. Поэтому, если вы удалите if, это приведет к ненужной трате времени и места; после добавления if метод sayName будет определен только при добавлении первого экземпляра new, а затем не будет.
2. Второй вопрос. Предположим, вы определили множество других методов, кроме метода :sayName, например: sayBye, cry, smile и т.д. На этом этапе вам просто нужно поместить их все в блок if, который оценивает sayName.
if (typeof this.sayName != "function") {
Person.prototype.sayName = function() {...};
Person.prototype.sayBye = function() {...};
Person.prototype.cry = function() {...};
...
}
Таким образом, либо все они еще не определены (когда первый экземпляр является новым), либо все они определены (после того, как другой экземпляр является новым), т.е.их существование последовательно, вы можете использовать одно и то же суждение вместо того, чтобы оценивать их по отдельности.
Вау, ты еще здесь, приятно купить милашку
Шаблон паразитического конструктора
Основная идея шаблона паразитического конструктора заключается в создании функции, которая просто инкапсулирует код, создавший объект, а затем возвращает только что созданный объект.
function createPerson(name, age, job) {
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function () {
console.log(this.name);
};
return o;
}
var person1 = new createPerson('bob', 22, 'frontend');
var person2 = new createPerson('lynn', 22, 'doctor');
console.log(person1.name); // bob
console.log(person2.name); // lynn
console.log(person1 instanceof createPerson ) // false
console.log(person2 instanceof createPerson ) // false
Parasitic Constructor Pattern, я лично думаю, что его следует читать так:
Parasitic-constructor-pattern, то есть метод паразитирования в конструкторе.
То есть под видом конструктора вы не можете указывать на конструктор с помощью instanceof!
Шаблон безопасного конструктора
function Person(name,age,job){
//创建要返回的对象
var o = new Object();
// 可以在这里定义私有变量和函数
//添加方法
o.sayName = function(){
console.log(name);
};
//返回对象
return o;
}
var friend = Person("Nicholas", 29 , "dancer");
friend.sayName(); //Nicholas
Безопасный объект — это объект, который не имеет общедоступных свойств и чьи методы не ссылаются на это..
Есть два отличия от шаблона паразитного конструктора.такой же:
* 新创建的实例方法不引用 this
* 不使用 new 操作符调用构造函数
Безопасные объекты лучше всего работают в некоторых безопасных средах. Шаблон безопасного конструктора, как и шаблон Factory, не может идентифицировать тип объекта.
Вы почти закончили, я дам вам понравившуюся картинку и поставлю лайк, спасибо
небольшое дополнение
Что случилось с новым оператором?
- он создает новый объект
- Будет выполнена ссылка [[Prototype]] (он же __proto__).
- это указывает на вновь созданный объект
- Каждый объект, созданный new, в конечном итоге будет связан с объектом-прототипом этой функции с помощью [[Prototype]].
- Если функция не возвращает объект типа Object (включая Functoin, Array, Date, RegExg, Error), то вызов функции в новом выражении вернет ссылку на объект.
Как понять инстанцирование
Смысл создания аналогичен, вы относитесь к классу как к объекту, это машина, вы хотите водить... Итак, вы спрашиваете компилятор (то есть компьютер в узком смысле): var person = new Person( ); — синтаксис заимствования автомобиля для вождения с машиной, где Person и Contructor — разница в имени (имя конструктора), например, если ваш отец любит называть собственную машину дорогой, то вы не неважно, кто это, когда вы ведете машину, вы также можете назвать ее деткой... Person() нельзя изменить, потому что вы должны сообщить машине, какую машину вы одолжили... тогда вы можете назвать ее как угодно вы хотите после заимствования.... Метод ниже, общедоступные атрибуты могут быть заимствованы. Например, у этой машины четыре колеса, а руль является атрибутом. Если вы хотите двигаться вперед или назад, ваша предпосылка состоит в том, что вам нужно одолжить машину, чтобы водить... Инстанциация - одолжить машину... Метод вызова - операция после одолжения машины!