Authored by Peter Rybin , Chrome DevTools team
In this short guide we'll review some new Chrome DevTools features for "function scope" and "internal properties" by exploring some base JavaScript language concepts.
Let's start with closures – one of the most famous things in JS. A closure is a function, that uses variables from outside. See an example:
| table { display: table } | |
| tr { display: table-row } | |
| thead { display: table-header-group } | |
| tbody { display: table-row-group } | |
| tfoot { display: table-footer-group } | |
| col { display: table-column } | |
| colgroup { display: table-column-group } | |
| td, th { display: table-cell } | |
| caption { display: table-caption } |
| (function () { | |
| var forEach = [].forEach, | |
| regex = /^data-(.+)/, | |
| dashChar = /\-([a-z])/ig, | |
| el = document.createElement('div'), | |
| mutationSupported = false, | |
| match | |
| ; | |
| function detectMutation() { |
| <div data-role="page" id="chatPage" data-theme="c" class="type-interior"> | |
| <div data-role="content"> | |
| <div class="content-primary"> | |
| <div data-role="header" data-position="fixed" data-tap-toggle="false"> | |
| <h1>Pub Messenger</h1> | |
| </div><!-- /header --> | |
| <div data-role="content"> | |
| <ul data-role="listview" id="messageList"> |
| <!DOCTYPE html> | |
| <html> | |
| <body> | |
| <div id=target></div> | |
| <script type="module" charset="utf-8"> | |
| import { html, render } from './lit-html.js'; | |
| const renderForm = (entity) => { | |
| const e = []; | |
| Object.keys(entity).forEach((attr) => { |
| /* Simple JavaScript Inheritance | |
| * By John Resig http://ejohn.org/ | |
| * MIT Licensed. | |
| * Usage exmaples: http://ejohn.org/blog/simple-javascript-inheritance/ | |
| */ | |
| // Inspired by base2 and Prototype | |
| (function(){ | |
| var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/; | |
| // The base Class implementation (does nothing) | |
| this.Class = function(){}; |
I met an issue with the common polyfill for Function.prototype.bind, found on the MDN, and I do not know where to fix it.
Here is the polyfill:
if (!Function.prototype.bind) {
Function.prototype.bind = function(oThis) {
if (typeof this !== 'function') {
// closest thing possible to the ECMAScript 5
// internal IsCallable function
throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
| if (!Object.is) { | |
| Object.is = function(x, y) { | |
| // SameValue algorithm | |
| if (x === y) { // Steps 1-5, 7-10 | |
| // Steps 6.b-6.e: +0 != -0 | |
| return x !== 0 || 1 / x === 1 / y; | |
| } else { | |
| // Step 6.a: NaN == NaN | |
| return x !== x && y !== y; | |
| } |
| const inBrowser = typeof window !== 'undefined' | |
| const inWeex = typeof WXEnvironment !== 'undefined' && !!WXEnvironment.platform | |
| const weexPlatform = inWeex && WXEnvironment.platform.toLowerCase() | |
| const UA = inBrowser && window.navigator.userAgent.toLowerCase() | |
| const isIE = UA && /msie|trident/.test(UA) | |
| const isIE9 = UA && UA.indexOf('msie 9.0') > 0 | |
| const isEdge = UA && UA.indexOf('edge/') > 0 | |
| const isAndroid = (UA && UA.indexOf('android') > 0) || (weexPlatform === 'android') | |
| const isIOS = (UA && /iphone|ipad|ipod|ios/.test(UA)) || (weexPlatform === 'ios') | |
| const isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge |
| <!DOCTYPE html> | |
| <!-- | |
| Copyright 2012 Eric Bidelman | |
| Licensed under the Apache License, Version 2.0 (the "License"); | |
| you may not use this file except in compliance with the License. | |
| You may obtain a copy of the License at | |
| http://www.apache.org/licenses/LICENSE-2.0 |