每日3题(60)

HTML:说说事件委托

CSS:写代码获取DOM元素：考察类选择器和属性选择器

JavaScript:new的实现原理是什么？

HTML:说说事件委托

https://zhuanlan.zhihu.com/p/26536815

CSS:写代码获取DOM元素：考察类选择器和属性选择器

<!-- 获取所有title属性值以baidu开头的元素 -->
<div title="baidu-video">百度视频</div>
<div title="baidu-music">百度音乐</div>
<div title="baidu-doc">百度文档</div>
<div title="google-doc">谷歌文档</div>

<script>
    let list = document.querySelectorAll("div[title^='baidu']");
</script>

w3c详解

JavaScript:new的实现原理是什么？能手写吗？

文字描述：

• 1.在内存中创建一个新的空对象
• 2.把this指向这个空对象
• 3.执行构造函数里面的代码，给这个新对象添加属性和方法
• 4.返回这个新对象(所以构造函数里面不需要return)

代码描述：

function _new(Parent, ...rest) {
    // 1.创建一个空对象
    let target = {};
    // 2.把this指向这个空对象
    target.__proto__ = Parent.prototype;
    // 3.执行构造函数里面的代码，给这个新对象添加属性和方法
    let result = Parent.apply(target, rest);
    if (
        (typeof result === 'object' || typeof result === 'function') &&
        result !== null
    ) { // 4.返回这个新对象
        return result;
    }
    return target;
}

function Person(name, age) {
    this.name = name;
    this.age = age
}

Person.prototype.sayName = function () {
    console.log(this.name);
}

const child = _new(Person, 'andy', 15)
console.log(child);
child.sayName() // 'andy'

参考文章