前端面试基础题：javascript获取DOM元素、鼠标、键盘事件...

document.getElementsByTagName('tagName')
document.getElementsByClassName('class')
document.getElementById('id')
document.querySelector('selector')
document.querySelectorAll('selector')
​
document.body  // 返回body元素对象
document.documentElement  // 返回html元素对象

// 注册
<button onclick="alert('Hi')"></button>
btn.onclick = function () {}

// 删除
eventTarget.onclick = null;

// 注册
eventTarget.addEventListener(eventNameWithoutOn, listener[, useCapture]);
// eventNameWithoutOn：事件类型字符串，不带on
// listener：事件处理函数
// useCapture：默认false，是否使用事件捕获

// 删除
eventTarget.removeEventListener(eventNameWithoutOn, listener[, useCapture]);

e.preventDefault()
return false  // 不适用于直接用onclick绑定的事件
e.returnValue=false  //IE678 阻止默认行为

e.stopPropagation()
e.cancelBubble=true  //IE678 阻止冒泡

window.addEventListener('load', function() {
    console.log('load执行');
});
window.addEventListener('DOMContentLoaded', function() {
    console.log('DOMContentLoaded执行');
})

let timeoutId = window.setTimeout(调用函数, 延迟毫秒数);
window.clearTimeout(timeoutId);

let intervalId = window.setInterval(调用函数, 间隔毫秒数);
window.clearInterval(intervalId);

// 创建一个工作线程
const worker = new Worker('worker.js');

// 向工作线程发送消息
worker.postMessage({ type: 'add', data: [1, 2]});

// 监听从工作线程返回的消息
worker.onmessage = function(event) {
    console.log('Received message from worker:', event.data);
}

// worker.js实现加法操作
// 监听从主线程发送的消息
self.onmessage = function(event) {
    if (event.data.type === 'add') {
        const sum = event.data.data.reduce((a, b) => a + b);
        // 向主线程发送消息
        self.postMessage(sum);
    }
};

// 父类
class Father {
    constructor (surname) {
        this.surname = surname;
    }
    say () {
        return '我是爸爸';
    }
}
// 子类
class Son extends Father {
    constructor (surname, firstname) {
        super(surname);
        this.firstname = firstname;
    }
    say () {
        return super.say() + '的儿子';
    }
}

// 使用构造函数继承父类属性
function Person (name, age, sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;
}
function Student (name, age, sex, score) {
    Person.call(this, name, age, sex);
    this.score = score;
}

// 使用原型对象继承父类方法
Person.prototype.say = function() {
    console.log(`我叫${this.name}`);
}
Student.prototype = new Person();
Student.prototype.constructor = Student;

fun.call(thisArg, arg1, arg2, …)
fun.apply(thisArg, [arg1, arg2, …])
fun.bind(thisArg, arg1, arg2, …)
// thisArg：在fun函数运行时指定的this值
// arg1, arg2, ...：传递的参数

Function.prototype.myCall = function (context, ...args) {
    context = (typeof context === 'object'? context: window);
    const key = Symbol();  // 防止覆盖掉原有属性
    context[key] = this;  // this是需要执行的方法
    const result = context[key](...args);  // 方法执行
    delete context[key];
    return result;
}

Function.prototype.myApply = function (context, args) {
    context = (typeof context === 'object'? context: window);
    const key = Symbol();
    context[key] = this;
    const result = context[key](...args);
    delete context[key];
    return result;
}

Function.prototype.myBind = function (context, ...args) {
    context = (typeof context === 'object'? context: window);
    return (...args) => {
        this.call(context, ...args);
    }
}

function foo () {
    console.log(this.a);
}
var obj = {
    a: 2,
    foo: foo
};
var bar = obj.foo;  // 函数别名
var a = 'oops, global'  // a是全局对象的属性
bar();  // 'oops, global'

var name = "window";
var person = {
  name: "person",
  sayName: function () {
    console.log(this.name);
  }
};
function sayName() {
  var sss = person.sayName;
  sss();  // window
  person.sayName();  // person
  (person.sayName)();   // person
  (b = person.sayName)();   // window
}
sayName();

var name = 'window'
var person1 = {
  name: 'person1',
  foo1: function () {
    console.log(this.name)
  },
  foo2: () => console.log(this.name),
  foo3: function () {
    return function () {
      console.log(this.name)
    }
  },
  foo4: function () {
    return () => {
      console.log(this.name)
    }
  }
}

var person2 = { name: 'person2' }

person1.foo1();   // person1
person1.foo1.call(person2);  // person2

person1.foo2();  // window
person1.foo2.call(person2);  // window

person1.foo3()();  // window
person1.foo3.call(person2)();  // window
person1.foo3().call(person2);  // person2

person1.foo4()();  // person1
person1.foo4.call(person2)();  // person2
person1.foo4().call(person2);  // person1

var name = 'window'
function Person (name) {
  this.name = name
  this.foo1 = function () {
    console.log(this.name)
  },
  this.foo2 = () => console.log(this.name),
  this.foo3 = function () {
    return function () {
      console.log(this.name)
    }
  },
  this.foo4 = function () {
    return () => {
      console.log(this.name)
    }
  }
}
var person1 = new Person('person1')
var person2 = new Person('person2')

person1.foo1()  // person1
person1.foo1.call(person2)  // person2

person1.foo2()  // person1
person1.foo2.call(person2)  // person1

person1.foo3()()  // window
person1.foo3.call(person2)()  // window
person1.foo3().call(person2)  // person2

person1.foo4()()  // person1
person1.foo4.call(person2)()  // person2
person1.foo4().call(person2)  // person1

var name = 'window'
function Person (name) {
  this.name = name
  this.obj = {
    name: 'obj',
    foo1: function () {
      return function () {
        console.log(this.name)
      }
    },
    foo2: function () {
      return () => {
        console.log(this.name)
      }
    }
  }
}
var person1 = new Person('person1')
var person2 = new Person('person2')

person1.obj.foo1()()  // window
person1.obj.foo1.call(person2)()  // window
person1.obj.foo1().call(person2)  // person2

person1.obj.foo2()()  // obj
person1.obj.foo2.call(person2)()  // person2
person1.obj.foo2().call(person2)  // obj

(function(){
   var x = y = 1;
})();
var z;
​
console.log(y); // 1
console.log(z); // undefined
console.log(x); // Uncaught ReferenceError: x is not defined
console.log(a);    //f a() {...}
console.log(a());    //2
var a = 1;
function a() {
  console.log(2);  
}
console.log(a);    //1
a = 3;
console.log(a());    //报错，现在的函数a已经被赋值过后的变量a给覆盖了，无法再调用a()
function a() {
    var temp = 10;
    function b() {
        console.log(temp); // 10
    }
    b();
}
a();

// -----------------------------

function a() {
    var temp = 10;
    b();
}
function b() {
    console.log(temp); // 报错 Uncaught ReferenceError: temp is not defined
}
a();

function fn () {  // fn是闭包函数
    var num = 10;
    return function () {
        console.log(num);
    }
}
var f = fn();
f();

function throttle(fn, delay) {
    let flag = false;
    return function () {
        if (flag) return;
        flag = true;
        setTimeout(() => {
            fn.apply(this, arguments);
            flag = false;
        }, delay);
    };
}

const add = (a, b, c) => a + b + c;
const currying = (fn, ...args) => {
    let allArgs = [...args];
    const num = fn.length;
    const res = (...args2) => {
        allArgs = [...allArgs, ...args2]
        if (allArgs.length === num) {
            return fn(...allArgs);
        } else {
            return res;
        }
    }
    return res;
}
const a = currying(add, 1);
console.log(a(2)(3));

// 解构赋值
let [a, b, c] = [1, 2, 3];
let person = { name: “zhangsan”, age: 20 };
let {name: myName, age: myAge} = person;

// 剩余参数
function sum (first, …args) {
	console.log(first);  // 10
  	console.log(args);  // [20, 30]
}
sum(10, 20, 30);

<div class="focus">
    <!-- 左右箭头 -->
    <a href="javascript:;" class="arrow-l">&lt;</a>
    <a href="javascript:;" class="arrow-r">&gt;</a>
    <!-- 图片 -->
    <ul>
        <li><a href="#"><img src="images/focus.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/focus1.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/focus2.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/focus3.jpg" alt=""></a></li>
    </ul>
    <!-- 小圆点 -->
    <ol class="circle"></ol>
</div>

* {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
}
li {
    list-style: none;
}
.focus {
    position: relative;
    margin: 100px auto;
    width: 721px;
    height: 455px;
    overflow: hidden;
}
.focus ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 600%;
}
.focus ul li {
    float: left;
}
.arrow-l,
.arrow-r {
    display: none;
    position: absolute;
    top: 50%;
    margin-top: -20px;
    height: 40px;
    width: 24px;
    background: rgba(0, 0, 0, .3);
    text-align: center;
    line-height: 40px;
    color: #fff;
    font-family: 'icomoon';
    font-size: 18px;
    z-index: 2;
}
.arrow-r {
    right: 0;
}
.circle {
    position: absolute;
    bottom: 10px;
    left: 50px;
}
.circle li {
    float: left;
    width: 8px;
    height: 8px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    margin: 0 3px;
    border-radius: 50%;
    cursor: pointer;
}
.current {
    background-color: #fff;
}

// 封装动画函数
function animate(obj, target, callback) {
    // 先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            clearInterval(obj.timer);
            callback & callback();
        }
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 15);
}

window.addEventListener('load', function () {
    // 获取元素
    var arrow_l = document.querySelector('.arrow-l');
    var arrow_r = document.querySelector('.arrow-r');
    var focus = document.querySelector('.focus');
    var focusWidth = focus.offsetWidth;
    // 鼠标经过focus就显示左右按钮，并停止自动播放
    focus.addEventListener('mouseenter', function () {
        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
        clearInterval(timer);
        timer = null;
    });
    // 鼠标移出focus就隐藏左右按钮，并启动自动播放
    focus.addEventListener('mouseleave', function () {
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
        timer = setInterval(function () {
            arrow_r.click();
        }, 2000);
    });
    // 动态生成小圆点
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('ol');
    for (var i = 0; i < ul.children.length; i++) {
        var li = document.createElement('li');  // 创建一个小圆点
        li.setAttribute('index', i);  // 自定义属性记录小圆点的索引号
        ol.appendChild(li);
        // 小圆点点击事件
        li.addEventListener('click', function () {
            // 先清除所有小圆点current类名
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            // 再给当前小圆点设置current类名
            this.className = 'current';
            var index = this.getAttribute('index');
            num = index;
            circle = index;
            // 使用封装的动画函数移动到目标位置
            animate(ul, -index * focusWidth)
        });
    }
    ol.children[0].className = 'current';
    // 克隆包含第一张图片的li放到ul的最后面
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    var num = 0;
    var circle = 0;
    var flag = true;  // 节流阀
    // 右按钮点击事件
    arrow_r.addEventListener('click', function () {
        if (flag) {
            flag = false;
            // 走到最后一张复制的图片时，快速回到第一张的位置
            if (num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;
            }
            num++;
            animate(ul, -num * focusWidth, function () {
                flag = true;
            });
            circle++;
            if (circle == ol.children.length) {
                circle = 0;
            }
            circleChange();
        }
    });
    // 左按钮点击事件
    arrow_l.addEventListener('click', function () {
        if (flag) {
            flag = false;
            // 走到第一张图片时，快速回到最后一张复制的图片
            if (num == 0) {
                num = ul.children.length - 1;
                ul.style.left = -num * focusWidth + 'px';
            }
            num--;
            animate(ul, -num * focusWidth, function () {
                flag = true;
            });
            circle--;
            circle = circle < 0 ? ol.children.length - 1 : circle;
            circleChange();
        }
    });
    // 设置小圆点current类名
    function circleChange() {
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        ol.children[circle].className = 'current';
    }
    // 自动播放轮播图
    var timer = setInterval(function () {
        arrow_r.click();
    }, 2000);
});