CoderGaoKK-CSDN博客

原创面向对象基础[构造函数VS普通函数]

编程语言面向对象 OOP java、javascript、php、C#(ASP.NET)、Python、GO、C++、Ruby…面向过程 POP C标记语言：HTML / CSS面向对象编程「对象、类、实例」对象：万物皆对象（泛指）类：对“对象”的划分（按照其功能结构特点，划分出大类和小类）实例：类中具体的事务【实例是和实例之前具备私有的特征也存在大量公共的特征】JS基于面向对象的JS本身就是基于面向对象思想开发出来的编程语言，所以我们学习和开发JS的时候，也要按照面向对象的思

2020-11-18 11:10:37 196

原创阶段复习练习题1

一、变量提升的习题1.下列代码的输出结果console.log(a, b, c);var a = 12, b = 13, c = 14;function fn(a) { console.log(a, b, c); a = 100; c = 200; console.log(a, b, c);}b = fn(10);console.log(a, b, c);/*undefined undefined undefined10 13 14100

2020-11-18 11:10:09 377 1

原创 JS高级编程技巧4（compose组合函数）

在函数式编程当中有一个很重要的概念就是函数组合，实际上就是把处理数据的函数像管道一样连接起来，然后让数据穿过管道得到最终的结果。例如： const add1 = (x) => x + 1; const mul3 = (x) => x * 3; const div2 = (x) => x / 2; div2(mul3(add1(0))); //=>3而这样的写法可读性明显太差了，我们可以构建一个compose函数，它接受任意多个函数作为参数（这些函数

2020-11-18 11:09:34 688

原创 JS高级编程技巧3（函数柯理化）

函数柯理化：预先处理的思想「形成一个不被释放的闭包，把一些信息存储起来，以后基于作用域链，访问到事先存储的信息，然后进行相关的处理，所有符合这种模式（或者闭包应用的）都被称为柯理化函数」先来看一道练习题：实现下面的效，函数中的代码如何写function fn() { //···}var sum = fn(10);console.log(sum(20)); //10+20console.log(sum(20, 30)); //10+20+30x:预先存储的值function curr

2020-11-18 11:09:17 216

原创 JS高级编程技巧2（惰性思想及应用）

获取元素的样式有哪些方法？window.getComputedStyle(元素)：获取当前元素经过浏览器计算的样式「返回样式对象」在IE6~8中，不兼容这种写法，需要使用 “元素.currentStyle” 来获取“属性 in 对象” 检测当前对象是否有这个属性，有返回true，反之falsefunction getCss(element, attr) { //if (window.getComputedStyle)这样也可以，跟下面一样，没有值是undefined，为false if (

2020-11-18 11:08:59 182

原创 JS高级编程技巧1（单例设计模式）

JS高阶编程技巧：利用闭包的机制，实现出来的一些高阶编程方式模块化思想惰性函数柯理化函数高阶组件 -> React函数防抖和节流bind…compose组合函数…模块化思想单例->AMD(require.js)->CMD(sea.js)->CommonJS规范(Node)->ES6Module比如：想实现一个页面的功能，这个页面分天气板块，资讯板块没有模块化思想之前，团队协作开发或者代码量较多的情况，回导致全局变量污染「全局变量冲突」/

2020-11-18 11:08:42 202

原创 THIS和闭包的综合练习题

写出下面代码的输出结果：var x = 3, obj = { x: 5 };obj.fn = (function () { this.x *= ++x; return function (y) { this.x *= (++x) + y; console.log(x); }})();var fn = obj.fn;obj.fn(6);fn(4);console.log(obj.x, x);此题的图解：全局代码执行形成一个

2020-11-18 11:08:22 153

原创 THIS的几种基本情况

this: 函数的执行主体（不等价于执行上下文「作用域」） -> 谁把这个函数执行的人具备的方法：吃饭王“童鞋”，早上去大饭店吃饭「鸡蛋灌饼，加10个鸡蛋」谁吃饭？王“童鞋”「方法执行主体:this」在哪吃饭？饭店「方法执行作用域:scope」想要分清楚函数执行的执行主体(this)，可以按照如下的规律来分析:事件绑定不论是DOM0还是DOM2级事件绑定，给元素E的某个事件行为绑定方法，当事件触发方法执行，方法中的this是当前元素E本身特殊情况：IE6~8中基于at

2020-11-18 11:07:52 340

原创闭包作用域练习题2

写出下列代码的输出结果：let a=0, b=0;function A(a){ A=function(b){ alert(a+b++); }; alert(a++);}A(1);A(2);此题的图解：函数执行会形成上下文，如果当前这个上下文中的内容(一般是堆内存)被之外的变量占有，那么当前这个执行上下文不被释放。全局的执行上下文EC(G)中有一个存储全局变量的对象VO(G):创建值0，创建变量名a，两者关联；创建值0，创建变量名b，两者关

2020-11-18 11:07:25 282

原创闭包作用域练习题(浏览器垃圾回收机制)

先看一道闭包作用域练习题(浏览器垃圾回收机制)下面代码的输出结果let x = 5;function fn(x) { return function(y) { console.log(y + (++x)); }}let f = fn(6);f(7);fn(8)(9);f(10);console.log(x);解析图中的执行上下文都会进栈执行，但是为了简便此处省略了执行环境栈，但是执行上下文依然会进栈执行。解析图如下：先开辟一个全局执行上下文EC(

2020-11-18 11:06:43 152

原创 ++i/i++/i+=n/i=i+n的区别

++i/i++/i+=n/i=i+n的区别+i：“+”只有一边，把值转换为数字转换机制与调用Number()一致i+=n 和 i=i+n 完全一样，有时是数学运算，当n为字符串或者对象时则为字符串拼接i++/++i 大部分情况和上面一样，但是如果i本身的值是字符串则不一致「上面会处理为字符串拼接，下面是数学累加」“++i”和上面一样也是转换为数字，但是还会自身累加一 ;"i++"先运算i再加一var i=1;i+={};//=>"1[object Object]"var i=1;

2020-11-03 20:13:12 1501

原创 JS数据类型的一些细节点

JS中的数据类型基本数据类型（值类型、原始类型）numberNaNInfinitystringbooleannullundefinedsymbolstatic SymbolSymbol.prototypebigint引用数据类型object普通对象数组对象正则对象日期对象JSON对象SetMap……function普通函数构造函数箭头函数生成器函数……number数字正数负数零小数 …NaN:not a

2020-11-02 23:14:06 91

原创 D9-新版浏览器下超坑的函数机制

在全局代码执行之前，首先会变量提升：把当前上下文中所有带var/function关键字的提前声明或者定义（带var只是提前声明，带function会提前的声明+定义）//变量提升：fn=0x000000;fn();//'ok'function fn() { console.log('ok');}//现在建议：函数表达式方式创建函数const fn = function () { console.log('ok');};fn(); 函数的变量提升在“新版本浏览器”中很变态

2020-08-28 00:31:09 126

原创 D8-var和let的区别

变量提升(声)当浏览器开辟出供代码执行的栈内存后,代码并没有自.上而下立即执行,而是继续做了一-些事情:把当前作用域中所有带var/function关键字的进行提前的声明和定义=>变量提升机制带var的只是提前声明( declare ) “var a;” 如果只声明没有赋值,默认值是undefined带function的不仅声明,而且还定义了( defined ) "a=13”定义其实就是赋值,准确来说就是让变量和某个值进行关联声明变量的五种方案：var/function 传统let/

2020-08-28 00:08:33 83

原创 D7-闭包面试题

下列代码的输出结果let a = 0, b = 0;function A(a) { A = function (b) { alert(a + b++); }; alert(a++);}A(1);A(2);此题的图解：省略了全局指向执行环境栈ECStack没有画所以答案：输出字符串 ‘1’ ‘4’作用域链查找机制：在代码执行过程中遇到任何变量都先看其是否属于自己的，不是自己的则顺着作用域一级一级向上查找。...

2020-08-27 23:46:09 121

原创 D6-垃圾回收及内存释放

学完上一篇文章后，下面把这道题稍作改动，来检测是否已经掌握了，代码如下：写出输出结果let x = 5;function fn() { return function (y) { console.log(y + (++x)); }}let f = fn(6);f(7);fn(8)(9);f(10);console.log(x);分析如下/* * EC(G) * x = 5; //6 7 8 * fn = 0x000000; [[scop

2020-08-18 18:44:29 143

原创 D5-闭包和作用域的底层处理机制

首先来看一道练习题let x = 5;function fn(x) { return function (y) { console.log(y + (++x)); }}let f = fn(6);f(7);fn(8)(9);f(10);console.log(x);此题的图解：++i 和 i++都是自身基础上累加1，累加和运算的顺序不一样i=1 5+(i++) 运算结果:6 i:2 “先运算在累加”i=1 5+(++i) i:2

2020-08-18 18:43:58 139

原创 D4-深度剖析parseInt的处理机制

首先来看一道例题：let arr = [10.18, 0, 10, 25, 23];arr = arr.map(parseInt);console.log(arr);在讲解parseInt()之前先一起回顾一下js数组的遍历方法map()map 支持返回值，回调函数中的返回值会把当前迭代的这一项替换掉arr = arr.map((item, index) => { // 循环遍历数组中的某一项就会触发回调函数 // 每一次还会传递当前项和当前项的索引});let arr = [

2020-08-16 08:06:30 188

原创 D3-深度剖析4大数据类型转换规则

数据类型转换的4大核心标准1.把其他数据类型转换为Number类型特定需要转换为Number的Number ([val])parseInt/parseFloat([val])隐式转换(浏览器内部默认要先转换为Number再进行计算的)isNaN([val])数学运算(特殊情况: +在出现字符串的情况下不是数学运算，是字符串拼接)在==比较的时候，有些值需要转换为数字再进行比较……2.把其它数据类型转换为字符串能使用的办法toString()String()

2020-08-16 07:18:25 693

原创 D2-堆栈内存及函数底层运行机制

1.对象属性名相关知识：练习题：写出下列代码的输出结果//example 1var a={}, b='0', c=0; a[b]='你好';a[c]='世界'; console.log(a[b]);---------------------//example 2var a={}, b=Symbol('1'), c=Symbol('1'); a[b]='你好';a[c]='世界'; console.log(a[b]);---------------------/

2020-08-15 16:38:31 218 1

原创 D1-数据类型详解和堆栈内存

详细解读JS中的9大数据类型数据类型分类+ 基本数据类型【7】+ 引用数据类型【2】+ isNaN、NaN、Infinity学习之前先来看一道面试题，看下这道题是否能做对。let res = parseFloat('left:200px');if(res===200){ alert(200);}else if(res===NaN){ alert(NaN);}else if(typeof res==='number'){ alert('number');}else{

2020-08-14 10:32:22 545

原创 2.闭包作用域核心概念

1.私有栈内存处理词法解析可以理解为在变量提升之前/之后，或者理解成变量提升的一部分，目前很多文章并没有一个确切的定论，只是在词法解析阶段出现语法错误的话代码第一行都不会执行，直接报错练习题：写出下面代码输出的结果console.log(a, b);var a = 12, b = 12;//等价于 var a=12;var b=12;function fn() { console.log(a, b); var a = b = 13;//等价于 var a=13;b=

2020-08-12 15:52:57 228

原创 1.变量提升&LET和VAR

本文知识点：变量提升机制:什么是变量提升、带var和不带的区别、等号左边变量提升、条件判断下的变量提升、重名问题的处理LET和VAR的区别:重复定义、变量提升、块级作用域作用域处理机制:全局和私有变量、作用域链、闭包的“保存8保护”、JQ源码分析、选项卡剖析、面试题练习1. 变量提升(声)当浏览器开辟出供代码执行的栈内存后,代码并没有自.上而下立即执行,而是继续做了一-些事情:把当前作用域中所有带var/function关键字的进行提前的声明和定义=>变量提升机制带var的只是提前

2020-08-11 20:45:33 394

原创原型和原型链的练习（重定向原型指向）

先看这道练习题function fun(){ this.a=0; this.b=function(){ alert(this.a); }}fun.prototype={ b:function(){ this.a=20; alert(this.a); }, c:function(){ this.a=30; alert(this.a) }}var my_fun=new

2020-08-04 20:51:57 480

原创内置类的原型上扩展方法

本文要点：内置类的原型上扩展方法：内置类的原型上会默认存在很多常用的方法Array.prototype / String.prototype / Object.prototype … 这些方法实例都可以调用，但是内置的方法不一定能满足所有的开发需求，有很多方法需要自己来编写向原型上扩展的方法，调用起来比较的方便实例.方法()方法执行的时候，方法中的THIS就是当前处理的实例1）扩展的方法名字最好设置前缀，例如：Myxxx，防止自己扩展的方法替换了内置的方法2）THIS的结果一定是对象

2020-08-04 20:49:26 241

原创一道面试题详解原型和原型链的基础知识

1.每一个类（函数）都具备prototype，并且属性值是一个对象2.对象上天生具备一个属性：constructor，指向类本身3.每一个对象（普通对象、prototype、实例、函数等）都具备：proto，属性值是当前实例所属类的原型函数数据类型：普通函数、类（内置类/自定义类）、箭头函数（都是Function的实例）对象数据类型：普通对象、数组对象、正则对象、日期对象、实例对象、函数对象（函数也是一个对象，也像普通对象一样，有自己的键值对）、类的prototype也是对象（都是Ob.

2020-07-27 14:56:04 426

原创彻底掌握面向对象基础（面向对象和构造函数）

OOP（Object Oriented Programming）：面向对象程序设计POP（Procedure /prəˈsiːdʒər/ Oriented）：面向过程程序设计编程语言：JAVA PYTHON PHP C# C C++ RUBY GO NODE…编程语言：面向对象/面向过程（除了C是面向过程的，其它都是面向对象的。）标记语言：HTML/CSSLESS/SASS/STYLUS…CSS预编译器：用面向对象的思想去编写CSS，最后把其生成浏览器可以识别的普通的CSS。之所以将标记语言.

2020-07-22 12:45:15 170

原创彻底理解var/let/const三者的区别

创建时的区别ES3创建变量用的是 varES6创建变量用的是 let / constvar/let/const三者指针指向的区别LET VS CONST =>突出的是指针指向以及等号赋值的底层机制=等号赋值其实就是指针指向的过程：先创建值，再创建变量（引申：堆栈内存上以及AO/VO上 [点到为止]），最后指针关联；LET创建的是变量，是因为可以修改当前变量的指针指向，而CONST创建的变量，指针指向一但确定，则不能再更改（引申：平时也看一些好的文章，有的文章中介绍CONST创建的是常量

2020-07-17 15:17:39 852

原创详解函数中的块级作用域--针对面试题

由一组练习题来讲解函数中的块级作用域练习题：以下三组代码的输出结果var x = 1;function func(x, y = function anonymous1() {x = 2}) { x = 3; y(); console.log(x); } func(5);console.log(x);//================var x = 1;function func(x, y = function anonymous1() {x = 2}) { var x = 3;

2020-07-13 23:00:16 489

原创 JavaScript函数的三种角色

函数即是函数是一个类，能当作构造函数执行；也是一个普通对象，可以添加属性和方法。所以函数有三种角色：1.函数；2.类；3.普通对象。函数是一个堆，函数体中堆代码以字符串的形式保存在这个堆中；同时函数也是一个普通对象有一些自己的属性【name、length、prototype、__proto__等属性】；函数还是类，作为构造函数通过new可以得到自己的实例。函数作为类的时候才有原型prototype，Foo.prototype上的可以设置公共的属性和方法（供new Foo出来的实例调用的，这些实例可以通过

2020-05-24 21:27:16 280

原创 CALL的原理解析及相关习题

CALL的原理解析首先来来了解一下如何获取除第一个参数以外其它参数:以下两种方法都是利用ES6的规则//1.方法一：利用剩余运算符Function.prototype.call = function call(context, ...params) { context == null ? context = window : null; //params就是除了第一个参数外剩余其它参数组成的数组}//2.方法二：利用ES6的新方法 Array.form()Function.pro

2020-05-23 18:23:36 880

原创 CALL和APPLY的具体应用

call和apply是用来改变this指向的，并且把函数立即执行。需求：需要把类数组转换为数组（call的应用）类数组：具备和数组类似的结构（索引和length属性以及具备iterator可迭代性），但是并不是数组的实例（不能用数组原型上的方法），我们把这样的结构称为类数组结构。function func(){ console.log(arguments);}func(10,20,30,40);/*Arguments(4) [10, 20, 30, 40, callee: ƒ

2020-05-23 13:49:52 315

原创 CALL和APPlY以及BIND语法（含BIND的核心原理）

CALL和APPlY以及BIND语法（含BIND的核心原理）每个函数都是Function的一个实例，Function原型（Function.prototype）上有3个方法call、apply、bind,所有的函数都可以通过原型链__proto__找到Function原型（Function.prototype）上的这三个方法Function.prototype：call、apply、bind,这三个方法都是用来改变函数中的THIS的call：[function].call([context],p

2020-05-20 23:18:40 176

原创 Object常用方法描述

Object() 对象内置类(每一个对象都是它的实例)通过在控制台中打印查看Object中提供的方法和属性，使用时直接Object.XXX来调用Object上的属性和方法。Object//控制台输出：ƒ Object() { [native code] }dir(Object)//控制台输出：ƒ Object() -- 展开如下/*arguments: (...)assign: ƒ assign()caller: (...)create: ƒ create()definePropert

2020-05-18 21:39:24 524

原创由数组的面向对象原型体系来解析Function和Object两大内置类的复杂关系

首先来大概浏览下这张数组的面向对象原型体系图，然后一起由这张图来分析Function和Object两大内置类的复杂关系，将数组和对象之间的两大属性__proto__和prototype的指向问题彻底理解。这张图以普通数组arr作为开端，分析Array内置类，再分析Function内置类，再分析Object内置类，最后整体分析相互之间的__proto__和prototype。第一：Array()内置数组类所有的对象都有属性__proto__ ，所有的函数都有属性prototype//数组arr是数组A

2020-05-18 21:37:43 227

空空如也

空空如也