js console.log all in one

this & arguments


"use strict"; /**
*
* @author xgqfrms
* @license MIT
* @copyright xgqfrms
* @created 2020-10-16
* @modified
*
* @description js console.log all in one
* @difficulty Easy Medium Hard
* @complexity O(n)
* @augments
* @example
* @link
* @solutions
*
* @best_solutions
*
*/ const log = console.log; const obj = {
length: 1,
output: function() {
log(`this.length =`, this.length, this);
(() => {
log(`iife =`, this.length, this);
})();
},
// 箭头函数 iife
output2: () => {
// 箭头函数 this 绑定只与执行的上下文有关,与定义的位置无关!
log(`arrow =`, this.length, this);
const test = () => {
log(`test =`, this.length, this);
}
test();
},
// arguments ??? this
output3: function (f) {
log(`\n`)
f();
log(`\n`)
log(`arguments =`, arguments);
log(`arguments[0] =`, arguments[0], this);
log(`\n`)
arguments[0]();
},
} obj.output();
obj.output2(); function f() {
log(`f =`, this, typeof f);
log(`f.length =`, f.length);
// log(`f =`, this.length);
// TypeError: Cannot read property 'length' of undefined
} f(); obj.output3(f); log(`this.length =`, this.length);
// log(`this =`, this);
// this = {}
// log(`global =`, global);
// Object /* $ node logs.js this.length = 1 {
length: 1,
output: [Function: output],
output2: [Function: output2],
output3: [Function: output3]
}
iife = 1 {
length: 1,
output: [Function: output],
output2: [Function: output2],
output3: [Function: output3]
}
arrow = undefined {}
test = undefined {}
f = undefined function
f.length = 0 f = undefined function
f.length = 0 arguments = [Arguments] { '0': [Function: f] }
arguments[0] = [Function: f] {
length: 1,
output: [Function: output],
output2: [Function: output2],
output3: [Function: output3]
} f = [Arguments] { '0': [Function: f] } function
f.length = 0
this.length = undefined */ /* // browser / window this.length = 1 {length: 1, output: ƒ, output2: ƒ, output3: ƒ}
iife = 1 {length: 1, output: ƒ, output2: ƒ, output3: ƒ}
arrow = 1 Window {0: global, window: Window, self: Window, document: document, name: "", location: Location, …}
test = 1 Window {0: global, window: Window, self: Window, document: document, name: "", location: Location, …}
f = Window {0: global, window: Window, self: Window, document: document, name: "", location: Location, …} function
f.length = 0 f = Window {0: global, window: Window, self: Window, document: document, name: "", location: Location, …} function
f.length = 0 arguments = Arguments [ƒ, callee: ƒ, Symbol(Symbol.iterator): ƒ]
arguments[0] = ƒ f() {
log(`f =`, this, typeof f);
log(`f.length =`, f.length);
// log(`f =`, this.length);
// TypeError: Cannot read property 'length' of undefined
} {length: 1, output: ƒ, output2: ƒ, output3: ƒ} f = Arguments [ƒ, callee: ƒ, Symbol(Symbol.iterator): ƒ] function
f.length = 0
this.length = 1 */

js 环境 bug

node.js 与浏览器不一致

1.

  1. browser

  1. node.js

2. arrow function


"use strict"; /**
*
* @author xgqfrms
* @license MIT
* @copyright xgqfrms
* @created 2020-10-01
* @modified
*
* @description 浏览器 env
* @difficulty Easy Medium Hard
* @complexity O(n)
* @augments
* @example
* @link
* @solutions
*
* @best_solutions
*
*/ const log = console.log; var a = 10; var obj = {
a: 20,
b: function() {
var a = 30;
log(`b this`, this)
// b this {a: 20, b: ƒ, c: ƒ}
log(`b`, this.a)
return this.a;
},
c: () => {
var a = 40;
log(`c this`, this)
// {}
log(`c`, this.a)
return this.a;
},
} // var test = new obj();
var test = obj; log(`\ntest.a`, test.a);
// 20
log(`\ntest.b()`, test.b());
// 20
log(`\ntest.c()`, test.c());
// 10 // test.a 20 // b this {a: 20, b: ƒ, c: ƒ}
// b 20
// test.b() 20 // c this Window {window: Window, self: Window, document: document, name: "", location: Location, …}
// c 10
// test.c() 10
"use strict";

/**
*
* @author xgqfrms
* @license MIT
* @copyright xgqfrms
* @created 2020-10-01
* @modified
*
* @description Node.js env
* @difficulty Easy Medium Hard
* @complexity O(n)
* @augments
* @example
* @link
* @solutions
*
* @best_solutions
*
*/ const log = console.log; var a = 10; var obj = {
a: 20,
b: function() {
var a = 30;
log(`b this`, this)
// { a: 20, b: [Function: b], c: [Function: c] }
log(`b`, this.a)
return this.a;
},
c: () => {
var a = 40;
log(`c this`, this)
// {}
log(`c`, this.a)
return this.a;
},
} // var test = new obj();
var test = obj; log(`\ntest.a`, test.a);
// 20
log(`\ntest.b()`, test.b());
// 20
log(`\ntest.c()`, test.c());
// undefined /* test.a 20
b this { a: 20, b: [Function: b], c: [Function: c] }
b 20 test.b() 20
c this {}
c undefined test.c() undefined */

refs



xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


js console.log all in one的更多相关文章

  1. js console.log color all in one

    js console.log color all in one console.log color Chrome console.log 语法 / grammar %c, %s, css style ...

  2. js console.log 打印 对像 数组 详解

    console.log是什么东西,其实就是一个打印js数组和对像的函数而已,就像是php的print_r,var_dump.console.log这个函数本身没什么好说的,这篇博客告诉大家怎么去用这个 ...

  3. js console.log打印变量注意事项

    如果是基本类型变量是没有异常的 let str = 'string' console.log(str) // string str = '改变了str变量' 如果是引用类型,打印就要注意了 let o ...

  4. [Node.js] 關於 console.log 的格式化輸出

    Node.js 當中的 console.log,除了基本字串的輸出之外,還可以利用 %s.%d.%j 格式化的輸出,就讓我們來看些例子吧! 一.範例1 (字串輸出):console.js consol ...

  5. js的线程和同步异步以及console.log机制

    项目上线了,闲下来就写写东西吧.积累了好多东西都没有做笔记~挑几个印象深刻的记录一下吧. js的同步异步以及单线程问题: 都知道单线程是js的一大特性.但是通常io(ajax获取服务器数据).用户/浏 ...

  6. Chrome & console.log & color & js

    Chrome & console.log & color & js console.log & color // OK log(`%cchat_list =\n%c${ ...

  7. JS高级群的日常!写一个从10到0的倒计时,用console.log打印,不可以用 setInterval!本来说好的研究avalonJS最后演变成了看着大神在那边互相比拼实力。。

      JS高级群的日常!写一个从10到0的倒计时,用console.log打印,不可以用 setInterval!本来说好的研究avalonJS最后演变成了看着大神在那边互相比拼实力..   小森执行一 ...

  8. 从window.console&&console.log(123)浅谈JS的且运算逻辑(&&)

    一.JS的且运算记得最开始看到window.console&&console.log(123),当时知道能起什么作用但是没有深入研究,最近在研究后总算弄明白了.要理解这个,首先得明白三 ...

  9. JS之console.log详解以及兄弟姐们邻居方法扩展

    console.log() 基本用法 console.log,前端常用它来调试分析代码,你可以在任何的js代码中调用console.log(),然后你就可以在浏览器控制台看到你刚才打印的常量,变量,数 ...

随机推荐

  1. Centos 7.x系统下忘记用户登录密码,重置root密码的方法

    转载的,作为一个参考保存.谢谢:https://blog.csdn.net/userpass_word/article/details/81807316 1.开机后进入以下界面,然后按Esc或者E键编 ...

  2. 【Python网络编程】epoll用法

    epoll发展进程 此处添加一下select.poll历程及其优缺点 原理 使用步骤 Create an epoll object--创建1个epoll对象 Tell the epoll object ...

  3. Python学习【第4篇】:元组魔法

    template = "i am {name},age:{age}" v = template.format(**{"name":'xiaoxing',&quo ...

  4. LOJ10097和平委员会

    POI 2001 根据宪法,Byteland民主共和国的公众和平委员会应该在国会中通过立法程序来创立. 不幸的是,由于某些党派代表之间的不和睦而使得这件事存在障碍. 此委员会必须满足下列条件: 每个党 ...

  5. Spark-读写HBase,SparkStreaming操作,Spark的HBase相关操作

    Spark-读写HBase,SparkStreaming操作,Spark的HBase相关操作 1.sparkstreaming实时写入Hbase(saveAsNewAPIHadoopDataset方法 ...

  6. Java 8新特性(Lambda,Stream API)

    由于最近总监要求学习Java 8的一些知识,就去网上找了 一套教程来学习学习,将学习结果做一个小的总结记录,方便以后使用: 1.Java 8的优点 2.Lambda表达式优点 2.1Lambda实例 ...

  7. UML——基本结构

    一.宏观导图 学习UML的时候我们首先要把握好她的结构,基本上好料都在里面了.最重要的是构造块的学习. 公共机制:是为了让我们更加清楚的描述UML的各种关系.图.事物等. 规则:和语法的意思差不多,就 ...

  8. docker(5)docker运行web应用

    前言 前面我们运行的容器并没有一些什么特别的用处. 接下来让我们尝试使用 docker 构建一个 web 应用程序. 我们将在docker容器中运行一个 Python Flask 应用来运行一个web ...

  9. 【uva 11134】Fabled Rooks(算法效率--问题分解+贪心)

    题意:要求在一个N*N的棋盘上放N个车,使得它们所在的行和列均不同,而且分别处于第 i 个矩形中. 解法:问题分解+贪心. 由于行.列不相关,所以可以先把行和列均不同的问题分解为2个"在区间 ...

  10. VJ train1 O-统计问题 题解

    原谅我缺少设备,只能手写图解 题目:           在一无限大的二维平面中,我们做如下假设:             1.  每次只能移动一格:             2.  不能向后走(假设 ...