JavaScript面试核心考点(精华)

// 基本类型
var a = 10
var b = a
b = 20
console.log(a) // 10
console.log(b) // 20

// 引用类型
var a = {x: 10, y: 20}
var b = a
b.x = 100
b.y = 200
console.log(a) // {x: 100, y: 200}
console.log(b) // {x: 100, y: 200}

typeof Symbol(); // symbol 有效
typeof ‘‘; // string 有效
typeof 1; // number 有效
typeof true; //boolean 有效
typeof undefined; //undefined 有效
typeof new Function(); // function 有效
typeof null; //object 无效
typeof [] ; //object 无效
typeof new Date(); //object 无效
typeof new RegExp(); //object 无效

[] instanceof Array; //true
{} instanceof Object;//true
new Date() instanceof Date;//true
new RegExp() instanceof RegExp//true
null instanceof Null//报错
undefined instanceof undefined//报错

Object.prototype.toString.call(‘‘) ; // [object String]
Object.prototype.toString.call(1) ; // [object Number]
Object.prototype.toString.call(true) ; // [object Boolean]
Object.prototype.toString.call(undefined) ; // [object Undefined]
Object.prototype.toString.call(null) ; // [object Null]
Object.prototype.toString.call(new Function()) ; // [object Function]
Object.prototype.toString.call(new Date()) ; // [object Date]
Object.prototype.toString.call([]) ; // [object Array]
Object.prototype.toString.call(new RegExp()) ; // [object RegExp]
Object.prototype.toString.call(new Error()) ; // [object Error]

//定义检测数据类型的功能函数
function checkedType(target) {
return Object.prototype.toString.call(target).slice(8, -1)
}
//实现深度克隆---对象/数组
function clone(target) {
//判断拷贝的数据类型
//初始化变量result 成为最终克隆的数据
let result,
targetType = checkedType(target)
if (targetType === ‘Object‘) {
result = {}
} else if (targetType === ‘Array‘) {
result = []
} else {
return target
}
//遍历目标数据
for (let i in target) {
//获取遍历数据结构的每一项值。
let value = target[i]
//判断目标结构里的每一值是否存在对象/数组
if (checkedType(value) === ‘Object‘ || checkedType(value) === ‘Array‘) {
//对象/数组里嵌套了对象/数组
//继续遍历获取到value值
result[i] = clone(value)
} else {
//获取到value值是基本的数据类型或者是函数。
result[i] = value
}
}
return result
}

function test(arg){
// 1. 形参 arg 是 "hi"
// 2. 因为函数声明比变量声明优先级高，所以此时 arg 是 function
console.log(arg); 
var arg = ‘hello‘; // 3.var arg 变量声明被忽略， arg = ‘hello‘被执行
function arg(){
console.log(‘hello world‘) 
}
console.log(arg); 
}
test(‘hi‘);
/* 输出：
function arg() {
console.log(‘hello world‘);
}
hello
*/

var a = 100
function fn() {
var b = 200
console.log(a) // 这里的a在这里就是一个自由变量
console.log(b)
}
fn()

function F1() {
var a = 100
return function () {
console.log(a)
}
}
function F2(f1) {
var a = 200
console.log(f1())
}
var f1 = F1()
F2(f1) // 100

function outer() {
var num = 0 //内部变量
return function add() {
//通过return返回add函数，就可以在outer函数外访问了。
num++ //内部函数有引用，作为add函数的一部分了
console.log(num)
}
}
var func1 = outer() //
func1() //实际上是调用add函数， 输出1
func1() //输出2
var func2 = outer()
func2() // 输出1
func2() // 输出2

// 情况1
function foo() {
console.log(this.a) //1
}
var a = 1
foo()

// 情况2
function fn(){
console.log(this);
}
var obj={fn:fn};
obj.fn(); //this->obj

// 情况3
function CreateJsPerson(name,age){
//this是当前类的一个实例p1
this.name=name; //=>p1.name=name
this.age=age; //=>p1.age=age
}
var p1=new CreateJsPerson("尹华芝",48);

// 情况4
function add(c, d){
return this.a + this.b + c + d;
}
var o = {a:1, b:3};
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34

// 情况5
箭头函数this

// 同步
console.log(100)
alert(200);
console.log(300)  //100 200 300
// 异步
console.log(100) 
setTimeout(function(){ 
  console.log(200) 
}) 
console.log(300) //100 300 200

Promise.resolve().then(()=>{
console.log(‘Promise1‘) 
setTimeout(()=>{
console.log(‘setTimeout2‘)
},0)
})
setTimeout(()=>{
console.log(‘setTimeout1‘)
Promise.resolve().then(()=>{
console.log(‘Promise2‘) 
})
},0)

for (var i = 0; i ) {
  console.log(i);
}
//输出：//0 1 2 3 4
//-------省略线---------
//如果改成这样呢？
for (var i = 0; i ) {
  setTimeout(function() {
    console.log(i);
  }, 1000 * i);
}
//setTimeout 会延迟执行，那么执行到 console.log 的时候，其实 i 已经变成 5 了
//输出：//开始输出一个 5，然后每隔一秒再输出一个 5，一共 5 个 5
//&那应该怎么改才能输出 0 到 4 呢？
//加个闭包就解决了，稳！
for (var i = 0; i ) {
  (function() {
    setTimeout(function() {
      console.log(i);
    }, i * 1000);
  })(i);
}
//&删掉这个 i 会发生什么？
for (var i = 0; i ) {
  (function() {
    setTimeout(function() {
      console.log(i);
    }, i * 1000);
  })(i);
}
//这样子的话，内部其实没有对 i 保持引用，其实会变成输出 5。
//&如果改一下，会输出什么？
for (var i = 0; i ) {
  setTimeout((function(i) {
    console.log(i);
  })(i), i * 1000);
}
//&如果改成这样，会输出什么？
for (var i = 0; i ) {
  setTimeout((function(i) {
    console.log(i);
  })(i), i * 1000);
}
//这里给 setTimeout 传递了一个立即执行函数。额，setTimeout 可以接受函数或者字符串作为参数，那么这里立即执行函数是个啥呢，应该是个 undefined ，
也就是说等价于：

setTimeout(undefined, ...);

//而立即执行函数会立即执行，那么应该是立马输出的。
//“应该是立马输出 0 到 4 吧。”
//&最后改成这样，会输出什么？
setTimeout(function() {
  console.log(1)
}, 0);
new Promise(function executor(resolve) {
  console.log(2);
  for( var i=0 ; i ) {
    i == 9999 && resolve();
  }
  console.log(3);
}).then(function() {
  console.log(4);
});
console.log(5);
//首先先碰到一个 setTimeout，于是会先设置一个定时，在定时结束后将传递这个函数放到任务队列里面，因此开始肯定不会输出 1 。

//然后是一个 Promise，里面的函数是直接执行的，因此应该直接输出 2 3 。

//然后，Promise 的 then 应当会放到当前 tick 的最后，但是还是在当前 tick 中。

//因此，应当先输出 5，然后再输出 4 。

//最后在到下一个 tick，就是 1 。
//最终输出2 3 5 4 1

var Person = function() {
this.age = 18
this.name = ‘匿名‘
}
var Student = function() {}
//创建继承关系,父类实例作为子类原型
Student.prototype = new Person()
var s1 = new Student()
console.log(s1)

function Parent(value) {
this.val = value
}
Parent.prototype.getValue = function() {
console.log(this.val)
}
function Child(value) {
Parent.call(this, value)
}
Child.prototype = new Parent()
const child = new Child(1)
child.getValue() // 1
child instanceof Parent // true

function Parent(value) {
this.val = value
}
Parent.prototype.getValue = function() {
console.log(this.val)
}
function Child(value) {
Parent.call(this, value)
}
Child.prototype = Object.create(Parent.prototype, {
constructor: {
value: Child,
enumerable: false,
writable: true,
configurable: true
}
})
const child = new Child(1)
child.getValue() // 1
child instanceof Parent // true

class Parent {
constructor(value) {
this.val = value
}
getValue() {
console.log(this.val)
}
}
class Child extends Parent {
constructor(value) {
super(value)
this.val = value
}
}
let child = new Child(1)
child.getValue() // 1
child instanceof Parent // true

var div1 = document.getElementById(‘div1‘)
// 添加新节点
var p1 = document.createElement(‘p‘)
p1.innerHTML = ‘this is p1‘
div1.appendChild(p1) // 添加新创建的元素
// 移动已有节点。注意，这里是“移动”，并不是拷贝
var p2 = document.getElementById(‘p2‘)
div1.appendChild(p2)

var div1 = document.getElementById(‘div1‘)
var parent = div1.parentElement

var div1 = document.getElementById(‘div1‘)
var child = div1.childNodes

var div1 = document.getElementById(‘div1‘)
var child = div1.childNodes
div1.removeChild(child[0])

// 事件冒泡



......
window.onclick = function() {
console.log(‘window‘);
};
document.onclick = function() {
console.log(‘document‘);
};
document.documentElement.onclick = function() {
console.log(‘html‘);
};
document.body.onclick = function() {
console.log(‘body‘);
}
outer.onclick = function(ev) {
console.log(‘outer‘);
};
inner.onclick = function(ev) {
console.log(‘inner‘);
};

inner.onclick = function(ev) {
console.log(‘inner‘)
ev.stopPropagation()
}