Web前端最新Javascript 进阶面向对象编程继承的一个例子，2024年最新web前端开发面试问题回答技巧及答案

最新推荐文章于 2024-09-29 07:32:37 发布

2401_84446513

最新推荐文章于 2024-09-29 07:32:37 发布

阅读量384

点赞数 4

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.youkuaiyun.com/2401_84446513/article/details/138990704

版权

程序员专栏收录该内容

162 篇文章

订阅专栏

文末

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；
大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。
```
var url = "id=" + this.id + "&value=" + this.value;
```

// alert(url);

    console.log(url);

    this.convertToReadable();

},

/**

 * 点击取消

 */

cancel: function ()

{

    this.textEle.val(this.getValue());

    this.convertToReadable();

},

/**

 * 切换到查看模式

 */

convertToReadable: function ()

{

    this.txtEle.show();

    this.textEle.hide();

    this.btnWapper.hide();

},

setValue: function (value)

{

    this.value = value;

},

getValue: function ()

{

    return this.value;

}

}

;


  

引入到页面代码：```

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <title></title>

    <script type="text/javascript" src="jquery-1.8.3.js"></script>

    <script type="text/javascript" src="PlaceFieldEditor.js"></script>



    <script type="text/javascript">

        $(function ()

        {



            $("ul li").each(function ()

            {

                new PlaceFieldEditor($(this).attr("id"), "请输出成绩...", $(this));

            });





        });



    </script>



    <style type="text/css">

        body

        {

            font-size: 12px;

            color: #333;;

        }



        ul li

        {

            line-height: 30px;

        }



    </style>

</head>

<body>





<ul>

    <li id="1">张三：</li>

    <li id="2">李四：</li>

    <li id="3">王二：</li>

</ul>



</body>

</html>

嗯，代码就不详细说了，都比较简单，使用了jQuery，如果不喜欢可以使用原生js，本人比较喜欢把jQuery当作js的工具使用。

2、第二个效果图的js代码：


/**

 * Created with JetBrains WebStorm.

 * User: zhy

 * Date: 14-6-7

 * Time: 下午5:34

 * To change this template use File | Settings | File Templates.

 */

function PlaceAreaEditor(id, value, parentEle)

{

    PlaceAreaEditor.superClass.constructor.call(this, id, value, parentEle);

}



extend(PlaceAreaEditor, PlaceFieldEditor);



PlaceAreaEditor.prototype.initElements = function ()

{

    this.txtEle = $("<span/>");

    this.txtEle.text(this.value);



    this.textEle = $("<textarea style='width:315px;height:70px;' />");

    this.textEle.text(this.value);



    this.btnWapper = $("<div style='display: block;'/>");

    this.saveBtn = $("<input type='button' value='保存'/>");

    this.cancelBtn = $("<input type='button' value='取消'/>");

    this.btnWapper.append(this.saveBtn).append(this.cancelBtn);



    this.parentEle.append(this.txtEle).append(this.textEle).append(this.btnWapper);



    this.convertToReadable();



};

写了PlaceAreaEditor继承了PlaceFieldEditor，然后复写了initElements方法，改变了text为textarea。

extend的方法，上一篇博客已经介绍过：


/**

 * @param subClass  子类

 * @param superClass   父类

 */

function extend(subClass, superClass)

{

    var F = function ()

    {

    };

    F.prototype = superClass.prototype;

    //子类的prototype指向F的_proto_ ， _proto_又指向父类的prototype

    subClass.prototype = new F();

    //在子类上存储一个指向父类的prototype的属性，便于子类的构造方法中与父类的名称解耦 使用subClass.superClass.constructor.call代替superClass.call

    subClass.superClass = superClass.prototype;

}

最后页面代码：


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <title></title>

    <script type="text/javascript" src="jquery-1.8.3.js"></script>

    <script type="text/javascript" src="PlaceFieldEditor.js"></script>

    <script type="text/javascript" src="com.zhy.extend.utils.js"></script>

    <script type="text/javascript" src="PlaceAreaEditor.js"></script>



    <script type="text/javascript">



        $(function ()

        {

            $("ul li div").each(function ()

            {

                new PlaceAreaEditor($(this).attr("id"), "请留言...", $(this));

            });

        });



    </script>



    <style type="text/css">



        body

        {

            font-size: 12px;

            color: #333;;

        }



        ul li

        {

            padding: 5px 0 8px 0 ;

        }



    </style>

</head>

<body>





<ul>

    <li id="1"><h3>我要改剧本，不让~~</h3>

        <div>

        </div>

    </li>



    <li id="2"><h3>悬崖上有桥么，有？没有~ </h3>

        <div>

        </div>

    </li>

    <li id="3"><h3>你敢打坏我的灯？不租~   </h3>

        <div>


**TCP协议**

- TCP 和 UDP 的区别？
- TCP 三次握手的过程？
- 为什么是三次而不是两次、四次？
- 三次握手过程中可以携带数据么？
- 说说 TCP 四次挥手的过程
- 为什么是四次挥手而不是三次？
- 半连接队列和 SYN Flood 攻击的关系
- 如何应对 SYN Flood 攻击？
- 介绍一下 TCP 报文头部的字段
- TCP 快速打开的原理(TFO)
- 说说TCP报文中时间戳的作用？
- TCP 的超时重传时间是如何计算的？
- TCP 的流量控制
- TCP 的拥塞控制
- 说说 Nagle 算法和延迟确认？
- 如何理解 TCP 的 keep-alive？

![](https://img-blog.csdnimg.cn/img_convert/6623c4987a528bf73be25b1f4fe0d0c3.webp?x-oss-process=image/format,png)

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.youkuaiyun.com/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

#### 浏览器篇

- 浏览器缓存?
- 说一说浏览器的本地存储？各自优劣如何？
- 说一说从输入URL到页面呈现发生了什么？
- 谈谈你对重绘和回流的理解
- XSS攻击
- CSRF攻击
- HTTPS为什么让数据传输更安全？
- 实现事件的防抖和节流？
- 实现图片懒加载？

![](https://img-blog.csdnimg.cn/img_convert/9ceb38981567a87b001f63c089a854d2.webp?x-oss-process=image/format,png)



(TFO)
- 说说TCP报文中时间戳的作用？
- TCP 的超时重传时间是如何计算的？
- TCP 的流量控制
- TCP 的拥塞控制
- 说说 Nagle 算法和延迟确认？
- 如何理解 TCP 的 keep-alive？

[外链图片转存中...(img-SnLAQIxf-1715905363315)]

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.youkuaiyun.com/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

#### 浏览器篇

- 浏览器缓存?
- 说一说浏览器的本地存储？各自优劣如何？
- 说一说从输入URL到页面呈现发生了什么？
- 谈谈你对重绘和回流的理解
- XSS攻击
- CSRF攻击
- HTTPS为什么让数据传输更安全？
- 实现事件的防抖和节流？
- 实现图片懒加载？

[外链图片转存中...(img-PYCFUMNg-1715905363316)]