你会JavaScript,也许你在项目中使用JavaScript如鱼得水,也踩了无数的坑,但有些坑,可能一辈子也踩不到,一位内根本不会发生在业务代码里。
1.Function.prototype竟然是个函数类型。而自定义函数的原型却是对象类型。
typeof Function.prototype==='function'; // true
function Perple(){}
typeof People.prototype==="object"; // true所以我们设置空函数可以这么做:
const noop=Function.prototype;
const noop=()=>{};2.一个变量真的会不等于自身吗?
const x=NaN;
x !==x; // true这是目前为止 js语言中唯一的一个不等于自己的数据。为什么?因为 NaN代表的是一个范围,而不是一个具体的数值。在早期的 isNaN()函数中,即使传入字符串,也会返回 true,这个问题已经在 es6中修复。
isNaN('abc'); // true
Number.isNaN('abc'); // false所以如果你想要兼容旧浏览器,用 x!==x 来判定是不是 NaN,是一个不错的方案。
3.构造函数如果 return 了新的数据。
// 不返回
function People(){}
const peoplr=new People(); // People{}
//返回数字
function People(){
return 1;
}
const people=new People(); // People {}
//返回对象
function Animal(){
return {
hello:"world",
};
}
const animal=new Animal(); // {hello:"world"}在实例化构造函数时,返回非对象类型将不生效
4..call.call到底在为谁疯狂打 call?
function fn1(){
console.log(1);
}
function fn2(){
console.log(2);
}
fn1.call.call(fn2); // 2所以 fn1.call.call(fn2)等效于 fn2.call(undefined)。而且无论你加多少个 .call,效果也是一样的。
5.实例后的对象也能再次实例吗?
function People(){}
const lili=new People(); // People {}
const lucy=new tom.constructor(); // People {}因为 lili 的原型链指向了 People的原型,所以通过向上寻找特性,最终在 People.prototype上找到了构造器即 People自身。
6.es6函数带默认参数时将生成声明作用域
var x=10;
function fn(x=2,y=function(){return x+1}){
var x=5;
return y();
}
fn(); // 37.函数表达式(非函数声明)中的函数名不可覆盖
const c=function CC(){
CC=123;
return CC;
};
c(); // function当然,如果设置 var CC=123,加声明关键词是可以覆盖的。
8.严格模式下,函数的this是 undefined而不是Window
// 非严格
function fn1(){
return this;
}
fn1(); // Window
// 严格
function f2(){
'use strict';
return this;
}
fn2(); // undefined对于模块化的经过 webpack打包的代码,基本都是严格模式的代码。
9.取整作也可以用按位操作
var x=1.23 | 0; // 1因为按位操作只支持32位的整形,所以小鼠点部分全部都抛弃
10.getter/setter也可以动态设置吗?
class Hello{
_name='lucy';
getName(){
return this._name;
}
//静态的 getter
get id(){
return 1;
}
}
const hel=new Hello();
hel.name; // undefined
hel.getName(); // luck
// 动态的 getter
Hello.prototype._difineGetter_('name',function(){
return this._name;
})
Hello.prototype._defineSetter_("name",function(){
this._name=value;
});
hel.name; // lucy
hel.getName(); // lucy
hel.name='jimi';
hel.name; // jimi
hel.getName(); //jimi11.class语法糖到底是怎么继承的?
function Super(){
this.a=1;
}
function Child(){
// 属性继承
Super.call(this);
this.b=2;
}
// 原型继承
Child.prototype=new Super();
const child=new Child();
child.a; // 1正式代码的原型继承,不会直接实例父类,而是实例一个空函数,避免重复声明动态属性
const extends=(Child,Super)=>{
const fn=function(){}
fn.prototype=Super.prototype;
Child.prototype=new fn();
Child.prototype.constructor=Child;
}12.es6居然可以重复对象
const obj={
a:{
b:1
},
c:2
};
const {a:{b},a}=obj;一行代码同时获取 a和a.b。在a和b都要多次用到的情况下,普通人的逻辑就是先解构出 a,再在下一行解构出 b 。
13.对象 === 比较的是内存地址,而 >= 将比较转换后的值
{}==={}; // false
//隐式转换 toString()
{} >={}; // true14.instanceof的判断方式是原型是否在当前对象的原型链上面
function People(){}
function Man(){}
Man.prototype=new People();
Man.prototype.constructor=Man;
const man=new Man();
man instanceof People; // true
//替换 People 的原型
People.prototype={};
man instanceof People; // false如果你用es6的class的话,prototype原型是不允许被重新定义的,所以不会出现上述情况
15.void是个固执老头
void 0 === undefined; //true
void 1 === undefined; //true
void {} ==== undefined; // true
void 'hello' === undefined; // true
void void 0 === undefined; // true16.本期的分享到了这里就结束啦,后期还会持续更新,希望对你有所帮助,让我们一起努力走向巅峰。