Download advanced web dev quiz - advanced web dev quiz download do código fonte

advanced web dev quiz

Dados do site

1.0.0

Baixar

Questionista avançado da web

Este repositório está relacionado ao meu curso de Frontendmasters.
Você encontrará as perguntas e recursos adicionais para entender melhor os conceitos.

Este teste avançado de desenvolvimento da web abrange uma ampla gama de coisas que os desenvolvedores da web lidam diariamente. O objetivo é (re) apresentar a você certos conceitos que você pode ter esquecido ao longo dos anos ou simplesmente não ser exposto a isso com frequência?

Divirta -se e espero que você aprenda algo novo hoje! Boa sorte! ?

️ Este repositório não contém as respostas (!) , Apenas as perguntas e recursos úteis sobre o tópico da pergunta! Para ver as respostas e assistir explicações visualizadas para cada pergunta, assista ao curso do Frontendmasters!

Visão geral

Pergunta 1: Ordem de execução async e defer
Pergunta 2: Renderização de oleoduto e composição
Pergunta 3: Resolvendo solicitações de domínio
Pergunta 4: Chamada Stack & Event Loop
Pergunta 5: dicas de recursos
Quesiton 6: Referência e destruição de objetos
Pergunta 7: PerformanceNavigationTiming
Pergunta 8: Diretivas de cache
Pergunta 9: Coleção de lixo
Pergunta 10: Custo de animação
Pergunta 11: Propagação de eventos
Pergunta 12: Especificidade do CSS
Pergunta 13: WeakMap
Pergunta 14: Web Vitals
Pergunta 15: Política de segurança de conteúdo
Pergunta 16: Políticas de referências
Pergunta 17: geradores
Pergunta 18: Métodos de promessa
Pergunta 19: Cache de volta para a frente
Pergunta 20: XSS, MITM, CSRF, ClickJacking
Pergunta 21: Estratégias de fonte
Pergunta 22: Cookies
Pergunta 23: CSS Pseudo -Seletores
Pergunta 24: Strict-Transport-Security
Pergunta 25: Camadas de renderização
Pergunta 26: Formatos de imagem
Pergunta 27: CORS
Pergunta 28: Loop de eventos
Pergunta 29: http/1, http/2, http/3
Pergunta 30: this palavra -chave

Todas as perguntas

1. Coloque os scripts na ordem certa de execução

A. <script defer src="defer1.js" /> (carrega em 300ms )
B. <script defer src="defer2.js" /> (carrega em 200ms )
C. <script async src="async1.js" /> (carrega em 300ms )
D. <script async src="async2.js" /> (carrega em 50ms )
E. <script async defer src="asyncdefer1.js" /> (carrega em 60ms )

Recursos

Responder:

Assistir Resposta e Explicação

Leitura adicional:

https://html.spec.whatwg.org/multipage/scripting.html#attr-script-async
https://javascript.info/script-async-defer
https://developer.mozilla.org/en-us/docs/web/html/element/script

2. Quais afirmações são verdadeiras?

A. A árvore de renderização contém todos os elementos do DOM e CSSOM combinados
B. A composição é o processo de separação de camadas com base no índice z, que são então combinadas para formar a imagem final exibida na tela
C. O processo de layout atribui cores e imagens aos elementos visuais na árvore de renderização
D. O processo de compostagem acontece no tópico do compositor
E. Elementos que não são visíveis na página, por exemplo display: hidden , não fazem parte da árvore Dom

Recursos

Responder:

Assistir Resposta e Explicação

Leitura adicional:

https://www.chromium.org/developers/design-documents/graphics-and-skia/
https://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome/
https://chromium.googlesource.com/chromium/src/+/master/docs/how_cc_works.md
https://docs.google.com/presentation/d/1bopxbgnrtu0ddsc144rcxayga_wf53k96imrh8mp34y
https://developer.chrome.com/blog/inside-browser-part4/
https://www.chromium.org/blink/

3. Preencha as lacunas

 - Browser sends request to [A]
- [A] queries [B]
- [B] responds with [C] IP address
- [A] queries [C]
- [C] responds with [D] IP address
- [A] queries [D]
- [D] responds with website's [E]

Resolver DNS recursivo
Servidor de nome da raiz
Endereço IP
Servidor de nomes de domínio de nível superior
Servidor de nomes autoritativos

Recursos

Responder:

Assistir Resposta e Explicação

Leitura adicional:

https://datatracker.ietf.org/doc/html/rfc1035
https://www.liquidweb.com/kb/how-to-demystify-the-dns-process/
https://www.cloudflare.com/learning/dns/what-is-dns/
https://www.cloudflare.com/learning/dns/what-is-recursive-dns/

4. O que é registrado?

 setTimeout ( ( ) => console . log ( 1 ) ) ;
Promise . resolve ( ) . then ( ( ) => console . log ( 2 ) ) ;
Promise . resolve ( ) . then ( ( ) => setTimeout ( ( ) => console . log ( 3 ) ) ;
new Promise ( ( ) => console . log ( 4 ) ) ;
setTimeout ( ( ) => console . log ( 5 ) ) ;

A. 1 2 3 4 5
B. 1 5 2 4 3
C. 3 2 4 1 5
D. 4 2 1 5 3
E. 2 4 3 1 5

Recursos

Responder:

Assistir Resposta e Explicação

Leitura adicional:

https://tc39.es/ecma262/#sec-promise-objects
https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke
https://developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/promise
https://web.dev/promises/
https://javascript.info/promise-basics
https://javascript.info/microtask-queue

5. Combine o recurso sugere com suas definições

A. dns-prefetch
B. preconnect
C. prefetch
D. preload

prioriza a busca de recursos críticos necessários para a navegação atual
executa a resolução de nomes de domínio em segundo plano
executa proativamente a resolução DNS e o handshake de TCP/TLS
solicita recursos não críticos em segundo plano

Recursos

Responder:

Assistir Resposta e Explicação

Leitura adicional:

https://html.spec.whatwg.org/#linktypes
https://www.chromium.org/developers/design-documents/dns-prefetching/
https://www.smingmagazine.com/2019/04/optimization-performance-source-hints/
https://web.dev/preconnect-and-dns-prefetch/
https://cssswizardry.com/2019/01/bandwidth-or-latency-when-to-optimise-which/
https://www.splunk.com/en_us/blog/learn/preconnect-source-hints.html

6. Qual é a saída?

 const member = { 
  name : "Jane" , 
  address : { street : "101 Main St" }
} ;
const member2 = { ... member } ;
member . address . street = "102 Main St" ;
member . name = "Sarah" ;

console . log ( member2 ) ;

A. { name: "Jane", address: { street: "101 Main St" }}
B. { name: "Jane", address: { street: "102 Main St" }}
C. { name: "Sarah", address: { street: "101 Main St" }}
D. { name: "Sarah", address: { street: "102 Main St" }}

Recursos

Responder:

Assistir Resposta e Explicação

Leitura adicional:

https://developer.mozilla.org/en-us/docs/glossary/shallow_copy
https://developer.mozilla.org/en-us/docs/web/javascript/reference/operators/spread_syntax

7. Coloque o `PerformanceNavigationTimings` na ordem certa

A. loadEventStart
B. domComplete
C. domContentLoadedEventStart
D. fetchStart
E. connectEnd
F. domInteractive

Recursos

Responder:

Assistir Resposta e Explicação

Leitura adicional:

https://www.w3.org/tr/navigation-timing-2/
https://developer.mozilla.org/en-us/docs/web/performance/navigation_and_resource_timings
https://web.dev/navigation-and-resource-timing/

8. Combine as diretivas de cache com suas definições

A. no-cache
B. must-revalidate
C. no-store
D. private
E. stale-while-revalidate

valida uma resposta obsoleta com o servidor de origem antes de usá -lo
Serve conteúdo obsoleto enquanto valia a resposta em cache com o servidor de origem
não cache nenhuma parte da solicitação ou resposta
valida uma resposta em cache com o servidor de origem antes de usá -lo, mesmo que ainda esteja fresco
impede o cache em caches compartilhados

Recursos

Responder:

Assistir Resposta e Explicação

Leitura adicional:

https://www.rfc-editor.org/rfc/rfc9111
https://www.keycdn.com/blog/http-cache-headers
https://www.cloudflare.com/learning/cdn/glossary/what-is-cache-control/

9. Que declarações são verdadeiras sobre este bloco de código?

 function addMember ( name ) {
  return { name , createdAt : Date . now ( ) }
}

let obj1 = addMember ( "John" ) ;
let obj2 = addMember ( "Sarah" ) ;

obj1 . friend = obj2 ;
obj2 . friend = obj1 ;

obj1 = null ;
obj2 = null ;

A. obj1 e obj2 não podem ser coletados de lixo, levando a um vazamento de memória
B. obj1 e obj2 serão coletados imediatamente após defini -los como null
C. obj1 e obj2 só serão coletados de lixo após fechar a guia do navegador
D. obj1 e obj2 podem ser coletados de lixo durante o próximo ciclo de coleta de lixo

Recursos

Responder:

Assistir Resposta e Explicação

Leitura adicional:

https://developer.mozilla.org/en-us/docs/web/javascript/memory_management
https://javascript.info/garbage-collection
https://github.com/thlorenz/v8-perf/blob/master/gc.md
https://medium.com/@moshikoo/garbage-collectore-in-v8-engine-1c582399837

10. Ao animar as seguintes propriedades, que têm os custos de renderização corretamente listados?

A. width : layout, tinta, composto
B. opacity : tinta, composto
C. background-image : composto
D. left : layout, tinta, composto
E. transform : tinta, composto

Recursos

Responder:

Assistir Resposta e Explicação

Leitura adicional:

https://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome/
https://developer.chrome.com/blog/inside-browser-part3/
https://www.smingmagazine.com/2016/12/gpu-animation-doing-it-tight/
https://web.dev/avoid-large-complex-layouts-and-layout-thashing/
https://developer.chrome.com/blog/hardware-accelerated-animations/

11. O que é registrado ao clicar no botão?

 < div class = "outer" >
  < div class = "inner" >
    < button > Click me! </ button >
  </ div >
</ div >

 outer . addEventListener ( "click" , ( ) => log ( "A" ) , true ) ;
outer . addEventListener ( "click" , ( ) => log ( "B" ) ) ;
inner . addEventListener ( "click" , ( ) => log ( "C" ) , true ) ;
inner . addEventListener ( "click" , ( e ) => {
   log ( "D" ) ;
   e . stopPropagation ( ) ;
   log ( "E" ) ;
} ) ;
button . addEventListener ( "click" , ( ) => log ( "F" ) ) ;
button . addEventListener ( "click" , ( ) => log ( "G" ) , true ) ;

A. A B C D E F G
B. A C G F D
C. B D E F G C A
D. A C G F
E. A C G F D E

Recursos

Responder:

Assistir Resposta e Explicação

Leitura adicional:

https://www.w3.org/tr/dom-level-2-events/events.html#events-flow
https://javascript.info/bubbling-and-capturing
https://developer.mozilla.org/en-us/docs/web/api/eventtarget/addeventlistener

12. Peça os seletores CSS por especificidade ascendente

A. div h1.large-text::before
B. div h1:first-child
C. h1:not(.small-text)
D .large-text:nth-child(1)
E. h1.large-text[id="title"]
F. h1.large-text#title

Recursos

Responder:

Assistir Resposta e Explicação

Leitura adicional:

https://www.w3.org/tr/2018/rec-selectors-3-20181106/#specificity
https://developer.mozilla.org/en-us/docs/web/css/specificity
https://specificity.keegan.st/

13. Que declarações são verdadeiras?

 const userTokenMap = new WeakMap ( ) ;

let user = { 
  name : "Jane Doe" , 
  age : 24 
} ;

userTokenMap . set ( user , "secret_token" ) ;

A. userTokenMap implementa o protocolo Iterador
B. Ao definir user para null , userTokenMap retorna 0
C. Se o objeto do usuário estiver definido como null , sua entrada userTokenMap pode ser coletada de lixo.
D. [...userTokenMap] Retorna uma variedade de entradas de userTokenMap

Recursos

Responder:

Assistir Resposta e Explicação

Leitura adicional:

https://read262.netlify.app/keyed-collections/weakmap-objects/
https://javascript.info/weakmap-weakset
https://developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/weakmap

14. Combine os vitais da web com as descrições corretas

A. TTFB
B. Fid
C. TTI
D. TBT
E. Cls
F. INP

O tempo que leva para uma página da web responder à primeira interação de um usuário.
O tempo em que o encadeamento principal é impedido de responder à entrada do usuário.
O tempo médio necessário para uma página da Web atualizar seus visuais depois que um usuário interage com ela.
O tempo que leva para o servidor responder a uma solicitação e começar a enviar dados de volta ao cliente
O tempo que leva para que uma página da web seja totalmente carregado e responsivo à entrada do usuário.
A estabilidade do layout de uma página da Web ou as mudanças inesperadas de layout que ocorrem em uma página da web à medida que carrega.

Recursos

Responder:

Assistir Resposta e Explicação

Leitura adicional:

https://web.dev/metrics/

15. Quais recursos serão permitidos com o seguinte cabeçalho CSP?

 default - src "none" ; script - src "self" ; img - src "self" example . com ; style - src fonts . googleapis . com ; font - src fonts . gstatic . com ;

A. <script src="/js/app.js"></script>
B. fetch("https://api.website.com/data")
C. @font-face { url("fonts/my-font.woff") }
D. <img src="data:image/svg+xml;..." />
<style>body { font-family: 'Roboto' }</style>
F. <iframe src="https://embed.example.com"></iframe>
G. <link rel="stylesheet" href="https://fonts.googleapis.com..>
H. <video src="https://videos.example.com/..."></video>

Recursos

Responder:

Assistir Resposta e Explicação

Leitura adicional:

https://content-security-policy.com/
https://developer.mozilla.org/en-us/docs/web/http/csp
https://web.dev/csp/

16. Quais afirmações são verdadeiras?

A. rel="noopener" é usado para impedir que a página original acesse o objeto window da página recém -aberta
B. rel="noreferrer" pode ser usado para impedir que a página recém -aberta acesse o objeto da window da página original
C. rel="noopener" e rel="noreferrer" só pode ser usado com https
D. rel="noopener" pode ser usado para evitar tabnabbing
E. O Referrer-Policy padrão é no-referrer-when-downgrade

Recursos

Responder:

Assistir Resposta e Explicação

Leitura adicional:

https://www.w3.org/tr/referrer-policy/
https://html.spec.whatwg.org/multipage/links.html#link-type-nooner
https://html.spec.whatwg.org/multipage/links.html#link-type-noreferrer
https://web.dev/referrer-best-practices/

17. Quando é `"In log: My input!"` ser registrado?

 function * generatorFunc ( ) {
  const result = yield "My input!" ;
  console . log ( "In log:" , result ) ;
  return "All done!"
} ;

const it = generatorFunc ( ) ;

A. it.next()
B. it.next("My input!") it.next()
C. it.next() it.next("My input!")
D. it.next() it.next()

Recursos

Responder:

Assistir Resposta e Explicação

Leitura adicional:

https://developer.mozilla.org/en-us/docs/web/javascript/guide/iterators_and_generators
https://javascript.info/generators
https://exploringjs.com/es6/ch_iteration.html
https://developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/generator
https://blog.logrocket.com/javascript-iterators-and-generators-a-complete-guide/

18. Conecte os métodos de promessa à saída certa

 const promises = [
   new Promise ( res => setTimeout ( ( ) => res ( 1 ) , 200 ) ,
   new Promise ( res => setTimeout ( ( ) => res ( 2 ) , 100 ) ,
   new Promise ( ( _ , rej ) => setTimeout ( ( ) => rej ( 3 ) , 100 ) ,
   new Promise ( res => setTimeout ( ( ) => res ( 4 ) , 300 )
] ;

Promise [ ❓ ]
   . then ( res => console . log ( "Result: " , res ) )
   . catch ( err => console . log ( "Error: " , err )

A. all
B. any
C. race
D. allSettled

Result: 2
Error: 3
Result: [{}, {}, {}, {}]
Result: 2

Recursos

Responder:

Assistir Resposta e Explicação

Leitura adicional:

https://javascript.info/promise-basics
https://developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/promise

19. Qual dos seguintes valores sempre tornará sua página inelegível para o BFCache?

A. unload
B. pagehide
C. onbeforeunload
D. pageshow
E. Tudo isso acima
F. Nenhuma das opções acima

Recursos

Responder:

Assistir Resposta e Explicação

Leitura adicional:

https://web.dev/bfcache/
https://www.smingmingmagazine.com/2022/05/performance-game-changer-back-forward-cache/
https://nitropack.io/blog/post/back-forward-cache

20. Conecte os termos com suas definições

A. XSS
B. CSRF
C. Corrigida da interface do usuário
D. mitm

permite que os atacantes injetem scripts maliciosos em páginas da web visualizadas por outras pessoas
Trata os usuários para interagir com elementos disfarçados ou ocultos
Trata os usuários para executar ações indesejadas, explorando sua sessão autenticada
permite que os invasores interceptem e modifiquem a comunicação entre duas partes sem o seu conhecimento

Recursos

Responder:

Assistir Resposta e Explicação

Leitura adicional:

https://owasp.org/www-community/attacks/xss/
https://owasp.org/www-community/attacks/csrf
https://owasp.org/www-community/attacks/clickjacking
https://www.imperva.com/learn/application-nsecurity/man-in-the-middle-attack-mitm/
https://cheatsheetSeries.owasp.org/cheatsheets/cross-site_request_forgery_prevention_cheat_sheet.html
https://cheatsheetSeries.owasp.org/cheatsheets/cross_site_scripting_prevention_cheat_sheet.html

21. Conecte as estratégias de fonte à sua definição

A. font-display: block
B. font-display: swap
C. font-display: fallback
D. font-display: optional
E. font-display: auto

renderizar temporariamente uma fonte invisível até que a fonte personalizada seja baixada
Use uma fonte de fallback enquanto a fonte personalizada estiver baixando, mude para a fonte personalizada quando disponível
Use apenas a fonte personalizada se estiver disponível, caso contrário, use uma fonte de fallback
Permite que o navegador determine o comportamento mais apropriado para o carregamento de fontes
Use a fonte personalizada, se estiver disponível, use uma fonte de fallback se a fonte personalizada não estiver disponível

Recursos

Responder:

Assistir Resposta e Explicação

Leitura adicional:

https://developer.mozilla.org/en-us/docs/web/css/@font-face/font-display
https://css-tricks.com/almanac/properties/f/font-display/

22. Que declarações são verdadeiras sobre o seguinte cabeçalho de cookie?

 Set - Cookie : my - cookie = "value" ; Domain = "website.com" ; Secure ; HttpOnly ;

R. Este cookie é acessível em www.website.com , mas não no blog.website.com
B. Este cookie só pode ser definido no lado do cliente no domínio website.com
C. Este biscoito é tratado como um cookie de sessão
D. Este cookie será enviado ao navegar de outro site para www.website.com

Recursos

Responder:

Assistir Resposta e Explicação

Leitura adicional:

https://httpwg.org/http-extensions/draft-ietf-httpbis-rfc6265bis.html#name-overview
https://resources.infosecinstitute.com/topic/securing-cookies-httponly-secure-flags/
https://developer.mozilla.org/en-us/docs/web/http/cookies
https://developer.mozilla.org/en-us/docs/web/http/headers/set-cookie

23. Qual dos seletores CSS (pseudo) podemos usar para direcionar apenas o primeiro item da lista `<li>One</li>` ?

 < div >
  < ul >
    < li > One </ li >
    < ul >
      < li > Two </ li >
      < li > Three </ li >
    </ ul >
  </ ul >
  < ul >
    < li > Four </ li >
  </ ul >
</ div >

A. ul:first-child > li
B. ul:first-child + li
C. ul:first-child > li:first-child
D. ul:first-of-type > li:first-of-type
E. ul:first-child + li:first-child

Recursos

Responder:

Assistir Resposta e Explicação

Leitura adicional:

https://developer.mozilla.org/en-us/docs/web/css/css_selectors
https://developer.mozilla.org/en-us/docs/web/css/pseudo-classes
https://www.w3.org/tr/selectors-4/#pseudo-classes

24. O que é verdade no cabeçalho a seguir?

 Strict - Transport - Security : max - age = 31536000 ; includeSubdomains ;

A. O cabeçalho aplica HTTPS por um ano no domínio e seus subdomínios
B. Quando max-age expirar, os navegadores padrão para HTTP
C. O max-age é atualizado toda vez que o navegador lê o cabeçalho
D. pedidos inseguros para subdomínios são permitidos

Recursos

Responder:

Assistir Resposta e Explicação

Leitura adicional:

https://cheatsheetSeries.owasp.org/cheatsheets/http_strict_transport_security_cheat_sheet.html
https://developer.mozilla.org/en-us/docs/web/http/headers/strict-transport-security

25. Qual das seguintes propriedades faz com que o elemento seja promovido a seu próprio renderizador?

A. z-index: 1
B. translate3d: (0, 0, 0)
C. will-change: transform
D. transform: rotate(45deg)
E. position: fixed
F. position: absolute

Recursos

Responder:

Assistir Resposta e Explicação

Leitura adicional:

https://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome/
https://surma.dev/things/forcing-layers/
https://web.dev/speed-layers/
https://www.chromium.org/developers/design-documents/graphics-and-skia/

26. Combine os formatos de imagem com as descrições

A. JPEG
B. png
C. Webp
D. Avif

Compressão com perdas e sem perdas, suporta HDR e WCG, suporta transparência
Tanto com a compressão com perdas quanto sem perdas, suporta a transparência, suporta a renderização progressiva
Compressão sem perdas, alta qualidade, suporta transparência, tamanho maior de arquivo
Compressão com perdas, suporta a renderização progressiva

Recursos

Responder:

Assistir Resposta e Explicação

Leitura adicional:

https://developer.mozilla.org/en-us/docs/web/media/formats/image_types
https://www.smingmagazine.com/2021/09/modern-image-formats-avif-webp/

27. O que é verdade sobre a seguinte configuração CORS?

 Access - Control - Allow - Origin : https : / / www . website . com
Access - Control - Allow - Headers : Content - Type
Access - Control - Allow - Methods : *
Access - Control - Expose - Headers : X - Custom - Header
Access - Control - Max - Age : 600

A. Uma solicitação de pré -voo é necessária
B. Somente solicitações de https://www.website.com são permitidas
C. solicitações com cookies são permitidas
D. A resposta real é armazenada em cache por 600ms
E. X-Custom-Header será o único cabeçalho de resposta incluído
F. GET , POST , PATCH e PUT métodos são permitidos, mas não DELETE

Recursos

Responder:

Assistir Resposta e Explicação

Leitura adicional:

https://www.w3.org/tr/2020/spsd-cors-20200602/
https://fetch.spec.whatwg.org/#http-cors-protocol
https://developer.mozilla.org/en-us/docs/web/http/cors

28. O que é registrado?

 setTimeout ( ( ) => console . log ( 1 ) ) ;

( async ( ) => {
  console . log ( 2 ) ;
  await Promise . resolve ( ) ;
  console . log ( 3 ) ;
} ) ( )

Promise . resolve ( ) . then ( ( ) => Promise . resolve ( ) . then ( ( ) => console . log ( 4 ) ) )

A. 1 2 3 4
B. 2 4 3 1
C. 2 3 4 1
D. 2 3 1 4

Recursos

Responder:

Assistir Resposta e Explicação

Leitura adicional:

https://tc39.es/ecma262/#sec-promise-objects
https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke
https://developer.mozilla.org/en-us/docs/web/javascript/reference/global_objects/promise
https://web.dev/promises/
https://javascript.info/promise-basics
https://javascript.info/microtask-queue

29. Quais declarações estão corretas?

A. http/2 permite várias solicitações e respostas simultaneamente em uma única conexão TCP
B. http/3 só pode ser usado com https
C. http/2 é compatível com o http/1.1
D. http/1.1 requer várias conexões TCP para processar várias solicitações simultaneamente

Recursos

Responder:

Assistir Resposta e Explicação

Leitura adicional:

https://www.section.io/engineering-education/http3-vs-http2/
https://www.cloudflare.com/learning/performance/http2-vs-http1.1/
https://www.cloudflare.com/learning/performance/what-is-http3/

30. O que é registrado?

 const objA = { 
  type : "A" ,
  foo ( ) { 
    console . log ( this . type ) 
  }
}

const objB = { 
  type : "B" ,
  foo : objA . foo ,
  bar : ( ) => objA . foo ( ) ,
  baz ( ) { objA . foo ( ) }
}

objB . foo ( ) ;
objB . bar ( ) ;
objB . baz ( ) ;

A. A B B
B. B A A
C. A A A
D. A undefined A
E. B undefined B

Recursos

Responder:

Assistir Resposta e Explicação

Leitura adicional:

https://tc39.es/ecma262/#sec-function-environment-records-gethisbinding
https://developer.mozilla.org/en-us/docs/web/javascript/reference/operators/this
https://javascript.info/object-methods

Expandir

Informações adicionais