基础题
我出的这套基础题,面试(当面答题,想百度是不存在的)好多人,情况都比较差,没有令我满意的,是我出题太难了么?
介绍一下js原型继承
查看答案
当我们想要从 object 中读取一个缺失的属性时,js 会自动从原型中获取它
举例:
const animal = {
eats: true,
sleep: true,
voice: '',
bark(){
console.log(this.voice);
},
}
const dog = {
run: true,
voice: 'wang~~ wang~~',
}
dog.__proto__ = animal;
console.log(dog.run) // true
console.log(dog.eats) // true
console.log(dog.bark()) // wang~~ wang~~
console.log(dog.sleep) // true
总结:
所有的对象都有一个隐藏的 [[Prototype]] 属性,它可以是另一个对象或者 null。
可以使用 obj.proto 进行访问。
[[Prototype]] 引用的对象称为“原型”。
要读取 obj 属性或者调用一个方法,而且它不存在,那么就会尝试在原型中查找它。
写/删除直接在对象上进行操作,它们不使用原型(除非属性实际上是一个 setter)。
我们调用 obj.method(),而且 method 是从原型中获取的,this 仍然会引用 obj。
方法重视与当前对象一起工作,即使它们是继承的。
扩展:
构造函数继承、组合继承、寄生继承、寄生组合式继承。
说说什么是防抖、节流,在实际应用中在哪些场景会用到它们
防抖:
连续触发的事件(高频),在单位时间T内只执行最后一次,
若在T内再次触发,则清空定时重新计算。场景:模糊搜索
节流:
连续触发的事件(高频),在单位时间T内只执行一次。窗口滚动,获取滚动条top
javascript如何实现跨窗口通信
若子域同源,则可以通过设置document.domain将窗口视为同源站点,进行通信,
例如本地储存等等方式。
若不同源,我们可以在通过 postMessage(data,targetOrigin) 这个接口,进行跨窗口通信。
什么是点击劫持,如何防范
点击劫持:
允许恶意网页以用户的名义点击 “受害站点”。
通常恶意网页在受害网站链接之上放置一个透明
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。
点击劫持的防范措施主要包括以下几点:
使用X-Frame-Options头部:这是最直接的防御手段。服务器可以通过在HTTP响应头中设置X-Frame-Options
来防止页面被嵌入到iframe中。有三个可选值:
DENY
:不允许任何页面加载当前页面。SAMEORIGIN
:只允许同源页面加载当前页面。ALLOW-FROM uri
:允许指定来源的页面加载当前页面,但这个选项并不是所有浏览器都支持。Content Security Policy (CSP):内容安全策略是一种更全面的安全机制,可以用来定义页面上的资源应该如何加载以及脚本应该如何执行。通过设置CSP的frame-ancestors
指令,可以达到与X-Frame-Options
类似的效果,且更加灵活和强大。
JavaScript防御:如果由于某些原因不能依赖于服务器端的头部设置,可以在页面的JavaScript中进行防御。例如,检查window.top
是否等于window.self
,如果不是,则可能页面被嵌套在了iframe中,此时可以选择重定向或者显示警告信息。
透明覆盖层:在页面的关键交互区域(如按钮、链接)上添加一个透明的覆盖层,阻止点击事件穿透到下面的恶意内容。当用户尝试点击时,实际上是点击在这个透明层上,从而保护了用户的操作不被恶意利用。
教育用户:虽然这不是技术性的解决方案,但提高用户对网络钓鱼和点击劫持攻击的认识也是很重要的。让用户了解不要在不可信的网站上输入个人信息,警惕异常的界面或请求。
综上所述,通过服务器端配置、客户端脚本防护以及用户教育等多层面的措施,可以有效防范点击劫持攻击。