摘要:標簽前端作者更多文章個人網站
Learning Notes - Understanding the Weird Parts of JavaScript
標簽 : 前端 JavaScript
[TOC]
The learning notes of the MOOC "JavaScript: Understanding the Weird Parts" on Udemy,including most important parts of JavaScript.
Basic concept Conceptual AsideCourse link: JavaScript: Understanding the Weird Parts
My Certification: UC-CWVEBCC5
Conceptual Aside:
Syntax Parser: a program that reads your code and determines what it does and if its grammer is valid
Lexical Environment: where something sits physically in the code you write
Execution Context: a wapper to help manage the code that is running
Name/Value Pair: a name which maps to a unique value
Object: A collection of Name/Value pairs
undefined: a special value/a special keyword that JavaScript has within it internally that means that the value hasn"s been set.It means that this is the value that was initially set by JavaScript.
single threaded: one command is being executed at a time.It may not be under the hood of the browser.
synchronous: one at a time and in order.
dynamic typing: you don"t tell the engine what type of data a variable holds,it figures it out while your code is running.
operator: a special function that is syntatically (written) differently.
coercion: converting a value from one type to another.
by value vs. by reference: all primitive types are by value and all objects are by reference.
array: collections of anything.
inheritance: one object gets access to the properties and methods of another object.
built-in function constructors: objects created by them have all the properties and methods on the functions" prototype property and what"s boxed inside of it is the primitive value itself.The built-in function constructors look like you"re creating primitives but you"re not,you are creating objects that contain primitives with a whole bunch of features.
Framework AsideFramework Aside:
default value: e.g. window.libName = window.libName || "lib 1"
namespace: a container for variables and functions.
function overloading: JavaScript doesn"t have it.There are other appoaches to deal with it.
whitespace: invisible characters that create literal "space" in your written code,like carriage returns,tabs, or spaces.
IIFEs and safe code: by wrapping code in an immediately invoked function, does not interfere with crash into,or be interfered by any other code that might be included in your application.
function factory: a function that returns or makes other things for you.
Dangerous AsideDangerous Aside:
automatic semicolon insertion: if you"re going to return an object from a function,you need to type the { right after return rather than in a new line.
new and functions: don"t forget the key word new in front of the function constructors,or you"ll probably get undefined returned and cause in trouble.You"d better always have a capital letter as the name of the constructor.
built-in function constructors: strange things can happen during comparison with operator and coercion.In general,it"s better not to use them.Use literals.
arrays and for..in: in the case of arrays,don"t use for..in because arrays are objects in JavaScrip and their items are added properties.
Execution Context and Lexical Environment Execution ContextExecution Context(Global) was created at global level by the JavaScrip engine, and two things were also created for you:
Global Object
A special valiable called this
When you open the file inside your browser, this object is the window object,which refers to the browser window.That is to say:this object equals window object at global level in this case.
Global means "Not Inside a Funciton". Global variables and functions get attached to the global object.
hoisting: variables and functions are to some degree available even though they"re written later in the code.
The phenomenon is because the exection context is created in two phases.
creation phase: global object and this set up in memory,an outer environment, also set up memory space for variables and functions(this step called hoisting).
execution phase: runs the code you"ve written line by line,interpreting it,covering it,compling it,executing it.
All variables in JavaScript are initally set to undefined,and functions are sitting in memory in their entirety.
Function Invocationinvocation: running a function.In JavaScrip,by using parenthesis().
Execution Stack: top execution context in the stack is the currently executing function.A new execution context is created and put on top of the stack for the function invoked,and popped off the stack when the function finished.
Variable Environment: where the variables live.And how they relate to each other in memory.
Every execution context has a reference to its outer environment.(that is to say,to its lexical environment)
execution context vs. outer environment reference:
execution context is created when you invoke a function.
outer environment reference is created for the execution context and it looks at where the code is physically written in the JavaScrip file.(A different way of thinking about it: the outer reference is to the execution context in which the function was created.)
Here is an example:
function c(){ console.log(myVar);//1 (4th line) } function b() { var myVar; console.log(myVar);//undefined (3rd line) } function a() { var myVar = 2; console.log(myVar);//2 (2nd line) b(); c(); } var myVar = 1; console.log(myVar);//1 (1st line) a(); console.log(myVar);//1 (5th line) // result is (five lines): 1 2 undefined 1 1
Scope Chain:those links of outer environment references where you can access variables.
scope: where a variable is available in your code.
asynchronous: more than one at a time.(Asynchronous part is about what"s happening outside the JavaScrip engine rather than inside it.)
Any events that happen outside of the engine get placed into the event queue,an if the execution stack is empty,if JavaScrip isn"t working on anything else currently,it"ll process those events in the order they happend via the event loop synchronously.
Types and OperatorsThere are six primitive types in JavaScrip.
primitive type: a type of data that represents a single value.That is,not an object.
undefined: represents lack of existence
null: represents lack of existence
boolean: true or false
number: floating point number.There"s only one "number" type.
string: a sequence of characters.Both " and " can be used.
symbol: used in ES6
precedence and associativity:
operator precedence: which operator function gets called first.
associativity: what order operator functions get called in: left-to-right or right-to-left.
Reference: Operator precedence
== vs. ===
== will try to coerce the values if the two values are not the same type.
=== doesn"t try to coerce the values.It"s strict equality.
Reference: Equality comparisons and sameness
The example below shows the usage of coercion to check for existence and is used in a lot of really great frameworks and libraries.
var a; //goes to internet and look for a value if(a){ console.log("Something is there"); }
or opertator ||: if you passed it two values that can be coerced to true and false,it will return the first one that coerces to true.
Objects and FunctionsObject have properties and methods:
Primitive "property"
Object "property"
Function "method"
Both [] and . can find the property on the object and give you the value.
var person = new Object(); person["firstname"] = "Brian";//use brackets [] person.lastname = "Way";//use dot .
Object literal vs. JSON string
The object literal syntax uses the curly braces to define name and value pairs separated by colons.
JSON stands for JavaScript Object Notation.It looks like object literal syntax except for some differences.For example,property names have to be wrapped in quotes.JSON is technically a subset of the object literal syntax.
JSON.stringify({firstname : "Brian", student: true})
JSON.parse("{"firstname":"Brian","student":true}");
First class functions: everything you can do with other types, you can do with functions.(Assign them to variables,pass them around,create them on the fly.)
In JavaScrip,functions are objects.The function is an object with other properties,that is to say, a function is a special type of object.Two main other properties:
it has a hidden optional name property which can be anonymous then if you don"t have a name.
we have code property that contains the code and that code property is invocable so we can run the code.
expression: a unit of code that results in a value.
Statement just does work and an expression results in a value.
mutate: to change something.
The keyword this points to what? Let"s see an example.
var c = { name: "The c object", log: function() { this.name = "Updated c object"; //this points to c object console.log(this); var setname = function(newname) { this.name = newname; //this points to the global object } setname("Updated again! The c object"); console.log(this); //this points to c object } } c.log();
In the example above,the internal function setname when its execution context was created,the this keyword points to the global object,even though it"s sitting kind of inside an object that I created.To avoid this case,just use var self = this;(set equal to by reference) as the very first line of your object method.
An array can be created in the following formmat:
var arr = new Array();
var arr = [1, 2, 3];
Array in JavaScript is zero based and dynamically typed,it figures out what type of things are on the fly.
arguments: the parameters you pass to a function.JavaScript gives you a keyword of the same name which contains them all.Although arguments doesn"t contain the names of arguments,just the values,you could use it like an array.A new thing is called a spread parameter....other means take everything else and wrap it into an array of this name "other".
IIFEsIIFEs - an immediately invoked function expressions
// using an Immediately Invoked Function Expression (IIFE) var greeting = function(name) { return "Hello " + name; }("John");
To wrap your function in parentheses.This is when you want a function expression instead of normal function statement.
//valid syntax but output nothing (function (name) { console.log("Hello " + name); }); // IIFE (function (name) { console.log("Hello " + name); }("Brian")); //also OK (function (name) { console.log("Hello " + name); })("Brian");understanding closures
Even though the outer function ended/finished,any functions created inside of it when they are called will still have a reference to that outer function"s memory.
Outer function is gone,the exectution context is gone.But what"s in memory for that execution context isn"t and JavaScript engine makes sure that the inner function can still go down the scope chain and find it.
In this way we say that the execution context has closed in its outer variables.And so this phenomenon,of it closing in all the variables that it"s supposed to have access to,is called a closure. This is the feature of the language JavaScript,very important.
callback function: a function you give to another function,to be run when the other function is finished.
call(),apply() and bind()All functions in JavaScript also get access to some special functions/methods, on their own.So all functions have access to a call method,an apply method and a bind method.
bind() creates a new copy of whatever function you"re calling it on.And then whatever object you pass to this method is what the this variable points to by reference.
call() invokes the function you"re calling it on.Also let you decide what the this variable will be.Unlike bind() which creates a new copy,call() actually executes it.
apply() does the exact same thing as call() except that it wants an array of parameters as the second parameter rather than just the normal list.
These functions can be used for function borrowing and function currying.
function currying: creating a copy of a function but with some preset parameters.
some open source libraries:
Object-Oriented JavaScript and Prototypal Inheritanceunderscore.js
lodash
moment.js
Classical vs. Prototypal Inheritance:
Classical Inheritance: verbose
Prototypal Inheritance: simple
All objects include functions hava a prototype property.The prototype is simply a reference to another object.
The prototype chain,the concept of prototypes is just I have this special reference in my object that says where to look for other properties and methods without manually going dot prototype.
reflection: an object can look at itself,listening and changing its properties and methods.
tip: the "for in" actually reached out and grabbed every property and method not just on the object but also on the object"s prototype
extend: here we just talk about the extend function in underscore.You can combine and compose objects in this extend pattern with relection,not just the prototype pattern.
Building Objectsfunction constructors: a normal function that is used to construct objects.(The this variable points a new empty object,and that object is returned from the function automatically.)
There are many approaches to building an object:
object literal syntax: {}
the key word new: var john = new Person();
first, an empty object is created.
then, it invokes the function with the this variable pointing to that empty object.
last, return the object if you don"t return anything explicitly,or return what is returned in the function.
Object.create: creates an empty object with its prototype pointing at whatever you have passed in to Object.create.
you can simply override/hide properties and methods on those created objects by setting the values of those properties and methods on new objects themselves.
ES6 and classes: another approach but still works the same under the hood,just syntactic sugar.
key word class: class is not the template or definition like other languages such as Java/C++,class is also an object.
key word extends: sets the prototype(__prototype__) for any of the objects created with this class.
.prototype: this prototype property of all functions is where the prototype chain points for any objects created using that function as a constructor.
The prototype property on a function is not the prototype property(__prototype__) of the function.
It"s used only by the new operator.In other cases,it"s just an empty object,hanging out there.
It"s the prototype of any objects created if you"re using the function as a function constructor.
takes up less memory space if you add method to the prototype because it"ll only have one,while it"ll have many copies if you add it to function constructor.
polyfill: code that adds a feature which the engine may lack.
// polyfill if (!Object.create) { Object.create = function (o) { if (arguments.length > 1) { throw new Error("Object.create implementation" + " only accepts the first parameter."); } function F() {} F.prototype = o; return new F(); }; }
syntactic sugar: a different way to type something that doesn"t change how it works under the hood.
Odds and Endsinitialization: when come accross a large initialization of objects,don"t get overwhelmed by the syntax.
typeof and instanceof:
typeof: it"s an operator(essentially a function) that takes a parameter returns a string.It will tell you under most cases what something is.
Object.prototype.toString.call(arr) gets array type([object Array]) returned,or you"ll get object returned.
typeof undefined returns undefined
typeof null returns object.It"s been a bug since forever.
instanceof: tells if any object is down the prototype chain.It will tell you what something has in its prototype chain.
strict mode on the MDN
transpile: convert the syntax of one programming language to another.
Typescript
Traceur(Traceur is a JavaScript.next-to-JavaScript-of-today compiler)
features of ECMAScript 6
作者@brianway更多文章:個人網站 | CSDN | oschina
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/82862.html
摘要:作者微信號微信公眾號簡書地址我把這篇文章分為四個部分機器學習,,和數學。在這篇文章中,我把每個主題的教程數量都是控制在五到六個,這些精選出來的教程都是非常重要的。每一個鏈接都會鏈接到別的鏈接,從而導致很多新的教程。 作者:chen_h微信號 & QQ:862251340微信公眾號:coderpai簡書地址:http://www.jianshu.com/p/2be3... showIm...
摘要:在這堂課中,學生將可以學習到深度學習的基礎,學會構建神經網絡,包括和等。課程中也會有很多實操項目,幫助學生更好地應用自己學到的深度學習技術,解決真實世界問題。 深度學習入門首推課程就是吳恩達的深度學習專項課程系列的 5 門課。該專項課程最大的特色就是內容全面、通俗易懂并配備了豐富的實戰項目。今天,給大家推薦一份關于該專項課程的核心筆記!這份筆記只能用兩個字形容:全面! showImg(...
摘要:本文將分享一些自己關于深度學習模型調試技巧的總結思考以為主。不過以卷積神經網絡為代表的深層神經網絡一直被詬病,這對于模型在工業界的應用推廣還是帶來了一定的阻礙。 作者楊軍,從事大規模機器學習系統研發及應用相關工作。本文將分享一些自己關于深度學習模型調試技巧的總結思考(以CNN為主)。最近因為一些需要,參與了一些CNN建模調參的工作,出于個人習性,我并不習慣于通過單純的trial-and-er...
摘要:如果你對算法實戰感興趣,請快快關注我們吧。加入實戰微信群,實戰群,算法微信群,算法群。 作者:chen_h微信號 & QQ:862251340微信公眾號:coderpai簡書地址:https://www.jianshu.com/p/e98... Learning Deep Learning(學習深度學習) There are lots of awesome reading lists...
摘要:機器學習深度學習與自然語言處理領域推薦的書籍列表人工智能深度學習與相關書籍課程示例列表是筆者系列的一部分對于其他的資料集錦模型開源工具與框架請參考。 showImg(https://segmentfault.com/img/remote/1460000014946199); DataScienceAI Book Links | 機器學習、深度學習與自然語言處理領域推薦的書籍列表 sho...
閱讀 2144·2023-04-26 00:38
閱讀 1930·2021-09-07 10:17
閱讀 887·2021-09-02 15:41
閱讀 637·2021-08-30 09:45
閱讀 541·2019-08-29 17:25
閱讀 3204·2019-08-29 15:07
閱讀 2182·2019-08-29 12:52
閱讀 3734·2019-08-26 13:35