正文 

当前位置： 首页 > 知识 > java教程

你不知道的js(代码片段)

jeffjoy jeffjoy     2022-12-10     720

关键词：

1、作用域 

块级作用域 let 只在函数内部自己的作用域内有效
全局作用域 var
函数作用域
找不到作用域抛出ReferenceError 变量有了则抛出 TypeError
先声明后赋值
函数提升 变量提升 函数优先，函数声明提升在普通变量之前
函数表达式不会提升
闭包：当函数可以记住并访问所在的词法作用域，即使函数是在当前词法作用域之外执行，这时就产生了闭包。
垃圾回收机制
2.this:

1.默认绑定 ： 全局
2.隐式绑定 ：
function foo()
console.log( this.a );

var obj2 =
a: 42,
foo: foo
;
var obj1 =
a: 2,
obj2: obj2
;
obj1.obj2.foo(); // 42
隐式丢失：是被隐式绑定的函数会丢失绑定对象，也就是说它会应用默认绑定，从而把 this 绑定到全局对象或者 undefined 上
function foo()
console.log( this.a );

var obj =
a: 2,
foo: foo
;
var bar = obj.foo; // 函数别名！
var a = "oops, global"; // a 是全局对象的属性
bar(); // "oops, global"
虽然 bar 是 obj.foo 的一个引用，但是实际上，它引用的是 foo 函数本身，因此此时的bar() 其实是一个不带任何修饰的函数调用，因此应用了默认绑定。
3.显示绑定 ： apply(),call()，bind()
4.new绑定
5.优先级： 显示绑定>new绑定>隐式绑定
对象
原型
行为委托
词法结构 break continue return 和随后的表达式之间不能换行
语法结构

3.数据类型
堆(heap)：堆是在程序运行时，申请某个大小的内存空间，动态分配。数据结构.像倒过来的树。
栈(stack)： 先进后出的数据结构。像桶。系统分配。
队列(queue)：先进先出。特殊线性表。
数据类型：

  1. 基本数据类型：null, undefined,string,number,boolean,symbol
  2. 引用数据类型：object(对象，数组，函数)

基本数据类型--名值都存在栈内存中。
引用数据类型--名在栈中，值存在堆内存中。栈内存会提供一个引用地址指向堆内存中的值。
引用数据类型进行复制时，复制的是引用地址，因此改变值时候两个都会受到影响，因此叫做浅拷贝。

var a=[0,1,2,3]; 
var b=a;
b[0] = 2; //a[0] 也会变为2
a[4] = 5;    //b[4] 也会为5
char s1[] = "aaaaaaaaaaaaaaa"; 
char *s2 = "bbbbbbbbbbbbbbbbb"; 
aaaaaaaaaaa是在运行时刻赋值的；放在栈中。 
而bbbbbbbbbbb是在编译时就确定的；放在堆中。 

1).七种内置类型 ：null, undefined,string,number,boolean,symbol,object
2).typeof() 区分数据类型 6种： undefined,string,number,boolean,symbol,object(包括null,array,function,object)
3).Object.prototype.toString() 返回对象内部属性Class
常见的原生函数： Sting(),Number(),Boolean(),Array(),Object(),Function(),RegExp(),Date(),Error(),Symbol()
例:Object.prototype.toString.call(["a","b","c"]) [Object Array]
Sting(),Boolean(),Number()显示创建包装对象。
4).instanceof去区分对象类型
5). 表达式void 没有返回值，返回undefined
6).NaN 不与任何值相等包括自身 isNaN()
7).undefined 声明未赋值 null 没有值
8).ES6 中新加入了一个工具方法 Object.is(..) 来判断两个值是否绝对相等 Object.is(a,NaN) //true
9).Infinity -Infinity +0 -0

4.值和引用
1.简单值（即标量基本类型值，scalar primitive）总是通过值复制的方式来赋值 / 传递，包括null、undefined、字符串、数字、布尔和 ES6 中的 symbol。
2.复合值（compound value）——对象（包括数组和封装对象）和函数，则总是通过引用复制的方式来赋值 / 传递。

字符串和数字转换
1.字符串转数字
显式 Number() toNumber() parseInt() parseFloat()
隐式 +"53"

2.数字转字符串
显式 String() toSting()
隐式 +""

3.对象默认都有valueOf()和toString()方法，Object.create(null)创建的对象[Prototype]属性为null

4.布尔类型 ToBoolen() (undefined,null,"",false,+0,-0,NaN) 转为false, 其他为true(例如：[],,function()) 

5.json字符串
　　JSON.stringify()  将 JavaScript 对象转换为字符串
　　toJSON()　　　将大写的字符串成员值序列化

　　JSON.parse()    将JSON字符串转化为对象

　　eval() 可用于将 JSON 文本转换为 JavaScript 对象。

7. 日期 获取时间戳 Date.now(),+new Date(),new Date().getTime()

Object.prototype.toString.call() 转为字符串
Array.prototype.slice.call() 能将类数组(arguments,NodeList)，字符串(String)转换成数组
Array.prototype.slice.call(arrayLike, index) 从第index个开始转换成数组
Array.from()

 4.深拷贝和浅拷贝的区别？
深拷贝的实现形式（几种）和浅拷贝的实现？
Object.assign() 进行的是浅拷贝，拷贝的是对象的属性的引用，而不是对象本身。Object.assign()可以处理一层的深度拷贝
Object.assign(target, ...sources)
Object.assign();Object.create();
深拷贝的实现：
1.手动复制
2.对象只有一层时候，Object.assign()
3.转成Json再转回来：用JSON.stringify把对象转成字符串，再用JSON.parse把字符串转成新的对象。
var obj1 = body: a: 10 ;
var obj2 = JSON.parse(JSON.stringify(obj1));
4.递归拷贝
5.Object.create()
6.jquery var obj2 = $.extend(true, , obj1);
7.函数库 lodash


dom元素获取值和赋值：
1. js.value = jQuery.val() 返回或设置被选元素的值
2. js.innerHTML = jQuery.html() 返回或设置被选元素的内容包括标签
3. js.innerText = jQuery.text() 设置或返回被选元素的文本内容
4. document.querySelector(‘#name‘).value querySelectorAll()
document.getElementById(‘name‘).value $("#name").val()
document.getElementByClassName(‘name‘).value $(".name").val()
document.write() 原样写入 wirteln() 末尾换行
document.getElementsByName()
document.getElementsByTagName()
5. input标签的readonly属性，表示只可读。但是可以通过js改变元素的值。
JavaScript通过DOM操纵HTML文档，修改的只是浏览器的呈现，而不会对文档本身内容进行修改。当input的type为hidden时候，value值会随着值的变化html也跟着变化。

 

思维导图

 


对象

1.创建方式：
对象字面量、new创建、Object.create() 、 inherit()
2.Object.create(null)创建的对象[Prototype]属性为null
3。属性特征：
1）、可写，可枚举，可配置
2）、属性的查询和设置
3）、属性删除 delete
4) 、检测属性 hasOwnProperty()、in、propertyIsEnumerable()可枚举 、Object.keys()
5) 、属性getter和setter
6) 、defineProperty() 、defineProperties() 、 getPropertyOf() 、isPropertyOf() 、
7) 、可扩展性 isSeal()、isFrozen()
8) 、序列化 toJson(),JSON.parse(),JSON.stringfy()

 

call()、apply()、bind() 上下文，参数
栈和堆
引用类型和值类型
深拷贝浅拷贝

array.prototype.slice.call()

《你不知道的js》提升(代码片段)

四、提升：一）、声明与赋值：? 在JS引擎中，我们一般认为的变量或函数声明，实际上分为两个部分。声明赋值//变量提升a=2;vara;console.log(a);//函数提升foo();functionfoo() console.log(1);? vara=2;? 这句声明实际上会被看为vara;a=2;两个部分... 查看详情

你不知道的js来聊聊this(代码片段)

为什么要使用this？什么是this?来看一段代码functionidentify()returnthis.name.toUpperCase();functionspeak()vargreeting="Hello,I‘m"+identify.call(this);console.log(greeting);varme=name:"Kyle";varyou=name:"Reader" 查看详情

你不知道的js(代码片段)

作用域LHSRHS区别如果RHS查询在所有嵌套的作用域中遍寻不到所需的变量,引擎就会抛出ReferenceError异常。值得注意的是,ReferenceError是非常重要的异常类型。相较之下,当引擎执行LHS查询时,如果在顶层(全局作用域)中也无法找到目标... 查看详情

《你不知道的js（中卷）》关于this(代码片段)

一、关于this：一）、为什么要用this？functionidentity() returnthis.name.toUpperCase();varme= name:"Kyle";varyou= name:"Reader";identity.call(me);//Kyleidentity.call(you);//Reader? 观察上面的代码，使 查看详情

你不知道的js(代码片段)

1、作用域 块级作用域let只在函数内部自己的作用域内有效 全局作用域var 函数作用域 找不到作用域抛出ReferenceError变量有了则抛出TypeError 先声明后赋值 函数提升变量提升函数优先，函数声明提升在普通变量之前 函数表达... 查看详情

你不知道的js系列上(45)－隐式混入(代码片段)

varSomething=　　cool:function()　　　　this.greeting=‘HelloWorld‘;　　　　this.count=this.count?this.count+1:1;　　Something.cool();Something.greeting;//‘HelloWorld‘Something.count;//1varAnother=　　cool:func 查看详情

《你不知道的js》——this全面解析(代码片段)

默认绑定//全局对象用于默认绑定functionfoo()console.log(this.a)vara=2;foo();//2//严格模式下，不能将全局对象用于默认绑定functionfoo()‘usestrict‘;console.log(this.a)vara=2;foo();//TypeError:thisisundefined//在严格模式下调用foo()则不影响默认绑定func 查看详情

你不知道的js系列(39)－对象遍历(代码片段)

for循环可以遍历数组varmyArray=[1,2,3];for(vari=0;i<myArray.length;i++)　　console.log(myArray[i])//123ES5增加了数组的辅助迭代器，包括forEach(...)、every(...)、some(...)forEach(...)会遍历数组中的所有值并忽略回调函数的返回值every(...)会一直运行直... 查看详情

《你不知道的js（上卷）》作用域闭包(代码片段)

五、作用域闭包：? 闭包不是神奇的魔法，它只是遵循我们前几章一直介绍的词法作用域书写代码的自然结果。? 闭包是由函数以及声明该函数的词法环境组合而成的。该环境包含了这个闭包创建时作用域内的任何局部变量。一... 查看详情

《你不知道的js（中卷）》行为委托(代码片段)

六、行为委托:? 总结第五章，JS中的[[Prototype]]机制就是对象之间的关联关系。一）、面向委托的设计：? 想要学习更直观的使用[[Prototype]]，必须认识到它代表了一种不同于类的设计模式。1、类理论：? 类设计模式鼓励你在继承时... 查看详情

《你不知道的js（中卷①）》语法(代码片段)

五、语法：? 语法（grammar）与词法（syntax）不同。后者强调语言的运算符、关键字等。而语法定义了此法规则是如何构成可运行的程序代码的。一）、语句和表达式：语句（statement）与表达式（expression），举例说明：vara=3*6;a=3*6... 查看详情

你不知道的js系列上(45)－显式混入(代码片段)

JS的对象机制并不会自动执行复制行为，由于其他语言中表现出来的复制行为，因此JS开发者也想出了一个方式来模拟类的复制行为，这个方法就是混入。我们先看第一种，显式混入。//非常简单的mixin()例子functionmixin(sourceObj,targe... 查看详情

你不知道的js系列(13)－什么是闭包(代码片段)

当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行functionfoo()　　vara=2;　　functionbar()　　　　console.log(a);　　　　returnbarvarbaz=foo();baz();//2——朋友，这就是闭包的效果在foo... 查看详情

你不知道的js系列(14)－闭包无处不在(代码片段)

上一节的闭包是为了解释如何使用闭包而人为地在结构上进行修饰，在昨天的闭包基础上，我们可以更加灵活的使用闭包functionwait(message)　　setTimeout(functiontimer()　　　　console.log(message)　　,1000)wait(‘hello,consure‘);内部函数timer... 查看详情

你不知道的js系列(29)－对象属性(代码片段)

存储在对象容器内部的是这些属性的名称，它们就像指针（从技术角度来说是引用）一样，指向这些值真正的存储位置。 varmyObject=　　a:2myObject.a;//2myObject[‘a‘];//2.语法通常被称为‘属性访问’，[]语法通常被称为&lsqu... 查看详情

《你不知道的js（中卷）》混合对象“类”(代码片段)

四、混合对象“类”：? 在研究类的具体机制之前，首先介绍面向类的设计模式：实例化（instantiation）、继承（inheritance）和（相对）多态（polymorphism）。一）、类理论：? 面向对象编程强调的是数据和操作数据的行为本质上是... 查看详情

你不知道的js系列(12)－声明提升(代码片段)

我们直觉上会认为JavaScript代码在执行时是由上到下一行一行执行的。但实际这并不完全正确 a=2;vara;console.log(a);这里可能会认为是undefined，因为vara声明在a=2之后。实际输出了2。 console.log(a);vara=2;鉴于上面的代码可能会是2... 查看详情

你不知道的js系列(22)－thisnew绑定(代码片段)

在传统的面向类的语言中，“构造函数“是类中的一些特殊方法，使用new初始化类时会调用类中的构造函数。通常的形式是这样的something=newMyClass(..);然而JavaScript中new的机制实际上和面向类的语言不同。它们只是被new操作... 查看详情