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. pycharm安装完成后的一些基本设置

    1.设置背景色 file-->Setting-->Appearance&Behavior-->Appearance 2.设置主题 settings --> editor ...

  2. NAT模式、路由模式、桥接模式的区别

    NAT模式 NAT模式概述 NAT是"Network Address Translation"的缩写,中文意思是"网络地址转换",它允许一个整体机构以一个公用I ...

  3. javamail发送邮件,支持yahoo,google,163.com,qq.com邮件发送

    https://www.iteye.com/blog/fangyunfeng-1847352 https://blog.csdn.net/weixin_38465623/article/details ...

  4. Location和Content-Location

    div.example { background-color: rgba(229, 236, 243, 1); color: rgba(0, 0, 0, 1); padding: 0.5em; mar ...

  5. pod资源限制和QoS探索

    简述 默认情况下,k8s不会对pod的资源使用进行限制,也就是说,pod可以无限使用主机的资源,例如CPU.内存等.为了保障k8s整体环境运行的稳定性,一般情况下,建议是对pod的资源使用进行限制,将 ...

  6. Java中的异常处理机制《》

    异常机制已经成为判断一门编程语言是否成熟的标准,异常机制可以使程序中异常处理代码和正常业务代码分离,保证程序代码更加优雅,并提高程序健壮性. Java异常机制主要依赖于try.catch.finall ...

  7. redis学习教程二《四大数据类型》

    redis学习教程二<四大数据类型>  四大数据类型包括:字符串    哈希    列表   集合一 : Redis字符串         Redis字符串命令用于管理Redis中的字符串 ...

  8. PyQt中ui编译成窗体.py,中文乱码

    我在Eric工具下编译的 解决办法: 1.打开 C:\Python27\Lib\site-packages\eric4\i18n,将中文资源包的名称"GB2312."去掉,变成er ...

  9. 织梦(DedeCms)的安全问题解决办法

    网上大家也看到DEDECMS这套程序,虽然便捷草根站长的快速建站,但安全问题也是非常多的.DEDE官方也在很久之前就已经不再对这套系统进行什么版本升级了,最多就是一些补丁修复: 好,废话不多说,下面整 ...

  10. 服务器CPU又爆了?Linux快速排查Java程序占用CPU很高的方法

    这个问题可以说是 Java 面试的高频面试题了,有很多面试官都喜欢问这个问题,问题可能是下面这样的. 线上一台服务器 CPU 使用率100% 了,如果你碰到这样的情况,如何排查并找到问题原因? 1.场 ...