Прототипическое наследование, способ, который может наследовать от других объектов в JavaScript. Если вы программировали на других языках, они обычно имеют классное наследство. Хотя JS имеет ключевое слово класса, введенное в ES6, это просто синтаксический сахар. У JS действительно нет занятий.
Давайте попробуем углубиться в это,
И прежде чем я начну обсуждать прототипическое наследство, я хочу прояснить кое -что в JS … В JS все есть объекты, я имею в виду почти все, теперь JS имеет 7 типов данных, это цифры, логические, строковые, нулевые, неопределенные, объекты, символ//введены новые в ES6 и все даты, кроме объектов, являются примитивными типами. За исключением нулевых и неопределенных, все примитивные типы JS имеют функции обертки, поэтому, когда вы вызовуте string ». Slice (0,8) в JS, за кулисами код, который выполняется:
String('string').slice(0,8)
Теперь, как насчет функций и массивов, давайте попробуем запустить следующий код в консоли Chrome
typeof [] // object
typeof {} // object
typeof function(){} //function
Я обсудим функции позже, но давайте поговорим о массивах, о том, как они являются объектами, хорошо массивы – это особый вид объекта в JS. Вы можете сделать индексацию в массивах и захватить предполагаемые значения. Но откуда вы получаете толкание, поп, методы сплайсинга в массивах. Как вы знаете, за кулисами наш массив обертывается массивом функций обертки, который подвергает нас всем этим методам …
Теперь давайте поговорим о функциях, о том, как они объекты …
// method 2
function sum(a,b){
return a+b;
}
//method 2
const sum2 = new Function('a' , 'b' ,'return a+b')
sum(3,2) //returns 5
sum2(3,2) //returns 5
Вы также можете создавать функции со вторым методом в JS, также в функциях, вы можете получить доступ к свойствам, таким как имя и другие, и делать то, что вы будете делать с объектами
function subtract(a,b){
return a-b
}
subtract.name // returns subtract
Хорошо, в простой слова, функции – это специальные объекты, которые можно вызовать …
Теперь мы можем действительно погрузиться в прототипическое наследство … Что ж, наследство – это то, как объекты наследуют свойства и методы друг от друга, пытаются запустить код в браузере
const obj = {
a: 'hello',
b: 'bye'
}
obj1.__proto__ // return Object()
Код должен вернуть конструктор базового объекта, почему это Потому что в JS объекты наследуют от базового объекта … Вот почему вы можете использовать методы в таких объектах, как HasownProperty, iSprototypeof и т. д… Мы не определили эти методы на наших объектах … они унаследовали … _ Прото _ В JS возвращает объект, от которого объект наследует Но как насчет массивов и функций,
//array
const arr = [1,2,3]
//function
function func(){
return 0;
}
console.log(func.__proto__)//returns Function()
console.log(arr.__proto__)//returns Array()
Хорошо, в случае функций и массивов, которые они наследуют от объекта базовой функции и объекта базового массива соответственно, поэтому мы можем оценить такие методы, как карта, уменьшение, фильтрование, форет и т. Д. На массивах … Потому что они унаследовали … Но базовая функция и объект массива, они тоже наследуют Давай выясним
//array
const arr = [1,2,3]
//function
function func(){
return 0;
}
console.log(Array.__proto__)//returns base Object
console.log(Function.__proto__)//returns base Object
console.log(func.__proto__.__proto__)//returns base Object
console.log(arr.__proto__.__proto__)//returns base Object
Ну, они наследуют от базового объекта, так Все они в конце наследуют от базового объекта
Теперь давайте посмотрим на код ниже
//array const arr = [1,2,3] console.log(arr.__proto__)//return Base Array object console.log(Array.prototype)//return Base Array object
Они оба возвращают объект базового массива … На самом деле, _ Прото _ На самом деле возвращает прототип унаследованного объекта , В этом случае наш ARR унаследовал от массива, и обр. _ прото _ фактически указал на свойство прототипа массива или массива. Прототип … Поэтому, когда вы создаете объекты, _ Прото _ Свойство также связано с ним, которая указывает на цепочку прототипа … Если вам интересно, что такое цепочка прототипов, теперь ее следует легко понять,
const arr = [1,2,3] arr.map(el=> el*2)
В приведенном выше фрагменте кода мы сопоставим через массив и умножаем 2 с каждым элементом … Что ж, если мы утешаем. Прототип объекта массива, там он находит объект карты, и, таким образом, мы можем использовать его …
Но Что произойдет, если мы также используем метод, который также не определен над цепочкой прототипа
const arr = [1,2,3] arr.lol(el=> el*2)
Хорошо у Arr нет метода LOL, поэтому JS поднимается в цепочке прототипа и переходит к прототипу объекта базового массива, также JS не находит метод карты, поэтому JS снова поднимается в цепочке прототипа, и и достигает прототипа базового объекта, также JS также не находит метод карты, поэтому JS снова поднимается в цепочке прототипа, чего вы ожидаете, что JS найдет,
const arr = [1,2,3] console.log(arr.__proto__.__proto__.__proto__)//returns null
JS Нашел NULL, здесь мы идем к концу цепочки прототипов, которая является базовым объектом, поскольку все в JS наследуется от нее, если мы поднимаемся по цепочке базового объекта, JavaScrip T существуют, это часто ссылается нулевой указатель , в этом случае JS не поднимается по цепочке прототипа и не возвращает ошибку или неопределенную … Таким образом, в одном из наших фрагментов кода выше, когда мы попытаемся получить доступ к arr.lol (), он вернет ошибку …
Теперь, когда мы понимаем прототипальное наследство, вы можете сказать, как все это полезно для нас …
const human = {
walk(){
console.log('walking....')
} ,
sleep(){
console.log('sleeping....')
} ,
describe(name){
console.log(`my name is ${name}`)
}
}
const programmer = {
code(){
console.log('coding ...')
}
В приведенном выше коде у нас есть объект человека и программиста, предположим, что мы хотим, чтобы наш программист ходил, спит и описывал себя, технически, программисты – это люди
Одним из способов может быть просто скопировать сон, ходить и описать метод и вставка объекта программиста, но, как программисты, мы никогда не должны повторять себя, именно здесь вступает в игру прототипическое наследование, мы можем сделать объект программиста наследовать от человека
const human = {
walk(){
console.log('walking....')
} ,
sleep(){
console.log('sleeping....')
} ,
describe(name){
console.log(`my name is ${name}`)
}
}
const programmer = {
code(){
console.log('coding ...')
}
}
programmer.__proto__ = human
for(const i in programmer){
console.log(i)
}
ты должен получить код Прогулка спать описывать
Итак, наш программист Объект наследует ходить , Сон , описать из ЧЕЛОВЕК объект … Еще одна вещь, которую мы могли бы сделать, это
for(const i in programmer){
if (programmer.hasOwnProperty(i)){
console.log(i)
}
}
ты должен получить код
Это только журналы CODE () Метод , потому что метод кода принадлежит объекту программиста, объект программиста не наследовал метод кода от любого другого объекта, поэтому при проверке Programmer.hashownProperty (i) , это вернулось правдоподобно …
Давайте убедимся, что объект программиста наследует от человеческого объекта
human.isPrototypeOf(programmer) //returns true
Здесь мы используем метод iSprototypeof, доступный на объектах, чтобы проверить, является ли человек прототипом программиста, или программист наследовал от человека
programmer.isPrototypeOf(human) //returns false
Здесь мы проверяем наоборот, мы проверяем, является ли программист прототипом человека или человеческий наследуй от программиста, ну, человек не наследует от программиста, несомненно, программист наследует от человека, и, таким образом, он возвращает ложь
И последнее в прототипическом наследстве, которое будет очень запутанным и шокирующим, и оно взорвется, только функции имеют свойство прототипа 💥🤯🤯💥
Давайте убедитесь, что базовый объект, массив, функция на самом деле функция
typeof Array //Function typeof Function //Function typeof Object //Function
Таким образом, у них есть свойство прототипа, и наши обычные массивы, объекты не имеют свойства прототипа, я знаю, супер путающий …
Таким образом, чтобы просмотреть все в JS – это объект, все наследует базовый объект в JS через цепочку прототипа, мы можем подняться по цепочке прототипа в поисках свойств на свойстве прототипа, _ Прото _ ссылки выше до следующего изменения прототипа, _ Прото _ ссылается на свойство прототипа, и только функции имеют свойство прототипа …
И другое, что Вы не должны действительно использовать _ Прото _ Для наследства это плохо для производительности, и есть много более эффективных способов наследования в JS, Одним из способов является объект. Create ()
const human = {
walk(){
console.log('walking....')
} ,
sleep(){
console.log('sleeping....')
} ,
describe(name){
console.log(`my name is ${name}`)
}
}
const programmer = Object.create(human) // does the same thing as programmer.__proto__
programmer.code = () => {
console.log('coding ...')
}
for(const i in programmer){
console.log(i)
}
Я надеюсь, что вы наконец понимаете, что именно является прототипическим наследством … Если вы нашли это полезным или полезным, пожалуйста, поделитесь 💓, 🦄 или 🔖. Спасибо!
Оригинал: “https://dev.to/grapejuice/the-thing-that-makes-javascript-differrent-prototypal-inheritance-8k”