js那些你可能忽略的小细节

箭头函数
//普通函数:
let add2 = function (x, y) {
return x + y;
}
//第一步:去掉function
let add2 = (x, y) {
return x + y;
}
//第二步:在()和{}之间加上胖箭头=>
let add2 = (x, y) =>{
return x + y;
}
//当只有一个参数时,()也可以省略
let add2 = x =>{
return x + x;
}
//当函数只有返回值时,return和{} 也能去掉
let add2 = x => x + x;
复制代码
this 是什么?
this是指 谁在调用函数 ,如果没有就是window
任何函数本质上都是通过某一个对象来调用的 ,如果没有直接指定,就是window
所有函数内部都有一个变量 this
它的值是调用函数的当前对象
test():window
p.test() : p
new test() : 新建的对象
p.call(obj) : obj

箭头函数在哪个作用域下声明,this就指向谁
箭头函数和普通函数的区别 this绑定
普通的function不会绑定this 在进入到普通函数之前,this指向Window,进入普通函数之后,this就会变成该函数的指向,
而箭头函数会绑定this,在进入到箭头函数之前,this指向Windows,进入之后,由于箭头函数会绑定this,所以这时候this还是指向window,
如果先进入普通函数再进入箭头函数,this就会从进入之前的指向window 变成该函数指向;

函数的protoype属性
每个函数都有一个prototype属性,它默认指向一个Object空对象(即称为:原型对象)这里 Object是一个函数
原型对象中有一个属性constructor,它指向函数对象 Date.prototype.constructor===Date
给原型对象添加属性(一般是方法
函数的所有实例对象自动拥有原型对象中的所有属性(方法) 添加Date.prototype.getSum=function(){} ,Date会有getSum这个方法
显式原型与隐式原型

每个函数function 都有一个prototype属性,即显式原型(属性)
每个实例对象 都有一个 proto,可称为隐式原型(属性)
对象的隐式原型的值为其对应构造函数的显式原型的值 Fn.prototype=fn.proto 都保存同一个对象的地址值 默认指向一个Object空对象,原型对象
原型链就是找隐式原型属性__proto__
原型链是用来查找对象属性的
读取对象的属性值时:会自动到原型链中去查找
设置对象属性值时:不会查找原型链,如果当前对象中没有该属性,会直接添加此属性并设置其值
方法一般定义在原型中(proto),属性一般通过构造函数定义在对象本身上
函数的显式原型指向的对象默认是空Object实例对象,(但Object不满足这句话)因为原型对象其实就是一个对象,当然可以说是Object实例
所有函数都是Function的实例,(包括Function它自己)
Function.proto
= Function.prototype// true
Object的原型对象是原型链的尽头
Object.prototype.proto // null

变量声明提升
//在定义语句之前就能访问到
var a =3
function fn(){
console.log(a)
var a=4
}
fn() // undefined

因为变量会声明提升,在进入函数时,函数中var 的变量会最先声明,但是没有赋值,然后再执行输出,最后执行赋值,所以结果是未定义,找变量会先在函数里面找,就近原则
箭头函数和普通函数的区别

箭头不会绑定,普通函数会绑定(能绑定就是能改变)
this指向不同
普通函数,谁调用这个函数,this指向谁
箭头函数,在哪里定义函数,this指向谁
箭头函数适合与this无关的回调,定时器,数组的回调
不适合与this有关的回调,事件回调,对象的方法

变量不是数据本身,它仅仅是存储数据的容器
let a = [0,1,2];
let b = a;
b[0] = 5;
console.log(a);// [5, 1, 2]

数组后面习惯性敲一个空格
// 获取用户输入的内容,并且输出到页面 1输入,2存储,3输出
let uname = prompt(‘请输入您的姓名:’)
document.write(uname)

js基本数据类型
数字类型
字符串类型
boolean 布尔类型
undefined 未定义类型 只声明,未赋值
null 空类型
引用数据类型
object 对象
function 函数
array 数组
js 推荐使用单引号引起字符串 “” ‘’``
模板字符串 拼接字符串和变量 在反引号中可回车换行不报错
document.write('大家好,我叫’ + name + ‘,今年’ + age + ‘岁’)

内容拼接变量时,用 包住变量,整体用反引号引起 / / 也可以 ‘ {}包住变量,整体用反引号引起 //也可以` 包住变量,整体用反引号引起//也可以{3.14 * r * r},一般不建议这样 document.write(大家好,我叫 n a m e ,今年 {name},今年 name,今年{age}岁`)
document.write()//能够识别html标签
console.log(typeof null) // object null 就是将一个对象赋值给一个变量,只不过这个对象还没创建好,就先让null赋值给这个变量

数据类型转换
隐式转换,系统内部自动转换
规则:
+号两边只要有一个是字符串类型,都会把另外一个转换为字符串;
除了+以外的运算符,像- * / 等等,都换转换为数字类型
注意 :
+号作为 正号,可以转化为Number 例: console.log(10 + +‘10’)// 20
显式转换
console.log(Number(‘10.01’)) // 10.01
console.log(parseInt(‘10.99’)) // 10 只保留整数,不四舍五入
console.log(parseFloat(‘10.99’)) // 10.99 转化为数字型,会保留小数
//parseInt 和 parseFloat 会先将 数据通过String 转换为字符串,再去截取
console.log(Number(‘true’)) // 1
console.log(parseInt(‘true’)) // NAN
console.log(Number(‘null’)) // 0
(Number(‘undefined’)) // NAN
console.log(parseInt(a,16)) // 将变量a 转换为16进制

Number 与 parseFloat 区别
Number (‘11.1abc’) 只能放数字类型的字符串,其他的不行 否则输出NaN(NOT a Number) Number 会先去调用String()函数,再转换
parseInt(‘11.1abc’) // 11.1 只会返回以数字开头的数字类型,如果parseInt(‘abc11.1abc’)// NaN 经常用于过滤单位 parseInt(‘100px’) // 100

表单取过来的值是字符串类型
return 只能返回一个值,如果要返回多个值,可以用数组将值存放,返回数组

猜你喜欢

转载自blog.csdn.net/longxiaobao123/article/details/129952078