前端面试题 + 持续更新中

最新推荐文章于 2024-07-20 10:36:53 发布

鲸渔要加油

最新推荐文章于 2024-07-20 10:36:53 发布

阅读量104

点赞数

分类专栏：面试系列文章标签： vue js javascript

本文链接：https://blog.csdn.net/qq_53283188/article/details/117926975

版权

面试系列专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、谈一谈双向数据绑定

就拿 input 输入框来举例子吧

先将创造一个原始数据 data ，将他渲染到输入框
再给输入框绑定 input 事件，如果输入框改变则改变 data 中的值
再将新的 data 的值渲染到输入框里面

在 vue 中可以用 v-model 相当于 vue 中的动态数据绑定 v-bind:value 加 v-on:input 事件绑定

在 js 中的底层原理我们用到了 Object 的方法 defineProperty(1.obj, 2.prop, 3.descriptor)

要定义的对象
要定义或修改的属性的名称或 Symblo
要定义或修改的属性描述（规则），此描述是一个对象，里面有两个函数，get() 在访问属性名时自动调用并 return 出属性值，set(形参) 在改变属性值时自动调用，形参接受的就是改变的属性值

<body>
    <div id="p"></div>
    <input id="ipt" type="text">

    <script>
        const data = {
            a: '123'
        }
        Object.defineProperty(data, 'b', {
            get() {
                return this.a
            },
            set(v) {
                this.a = v
                p.innerHTML = v
                ipt.value = v
            }
        })
        ipt.oninput = function (e) {
            data.b = e.target.value
        }
    </script>
</body>

这里说一下在 ES6 中新增的原始数据类型，由于 Symbol 类型的特殊性，用 Symbol 类型的值来做对象的 key 与常规的定义或修改不同，而 Object.defineProperty 是定义 key 为Symbol 的属性的方法之一

二、什么是跨域？跨域解决方法

因为浏览器的同源策略的限制才会出现跨域，同源策略是浏览器最核心也最基本的安全功能，它会阻止一个域的 javascript 脚本和另外一个域的内容进行交互，所谓同源（即指在同一个域）就是两个页面具有相同的协议，主机和 端口号

【1】无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB

【2】无法接触非同源网页的 DOM

【3】无法向非同源地址发送 AJAX 请求

跨域解决方案

1、通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、跨域资源共享（CORS）
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域

具体查看网上前端常见的跨域方案

三、深浅拷贝

一、数据类型

数据分为基本 数据类型 (String, Number, Boolean, Null, Undefined，Symbol) 和 引用数据类型（统称为 Object 类型，细分的话有：Object 、Array 、Date 、RegExp、Function… ）

基本数据类型的特点：直接存储在栈(stack)中的数据

引用数据类型的特点：数据存放在堆内存里，在栈中引用，因为引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址

二、深浅拷贝

深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的

而 浅拷贝 就是拷贝这个地址指针的指向，新旧对象共享同一块内存，修改任意对象会影响其他的对象

JS中拷贝Array的 slice 和 concat 方法

而 深拷贝 会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象

JS中拷贝Array的 slice 和 concat 方法

slice和contact对于第一层是 深拷贝，但对于多层的时候，是复制的引用，所以是 浅拷贝

浅拷贝

展开运算符
Object.assign()
如果对象的属性值为简单类型（如string， number），通过Object.assign({},srcObj);得到的新对象为深拷贝；如果属性值为对象或其它引用类型，那对于这个对象而言其实是浅拷贝的
for in 被循环的对象存在嵌套对象时为浅拷贝
被循环的对象存在嵌套对象时为浅拷贝
被循环的对象不存在嵌套对象时为深拷贝
等号赋值

深拷贝

JSON.parse() 和 JSON.stringify()
使用递归实现深拷贝
jQuery 的 $extend()

鲸渔要加油

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端面试题 + 持续更新中

一、谈一谈双向数据绑定就拿 input 输入框来举例子吧先将创造一个原始数据 data ，将他渲染到输入框再给输入框绑定 input 事件，如果输入框改变则改变 data 中的值再将新的 data 的值渲染到输入框里面在 vue 中可以用 v-model 相当于 vue 中的动态数据绑定 v-bind:value 加 v-on:input 事件绑定在 js 中的底层原理我们用到了 Object 的方法 defineProperty(1.obj, 2.prop, 3.descriptor)
复制链接

扫一扫