JS-on/new/extend/proxy 内容补充

杯似坛酒

已于 2022-03-04 21:02:48 修改

阅读量384

点赞数

文章标签： javascript elementui webview

于 2022-03-04 20:16:45 首次发布

本文链接：https://blog.csdn.net/abundoning/article/details/123281831

版权

这篇博客深入探讨了JavaScript中jQuery的extend方法用于合并对象，以及其在处理指针问题上的关键作用。同时，讲解了jQuery原型、on方法用于事件绑定，以及proxy方法确保函数上下文正确。最后，介绍了new操作符在创建对象实例过程中的四个步骤。文章通过一个具体的对话框添加/删除代办目录的例子，生动展示了这些概念的实际应用。

摘要由CSDN通过智能技术生成

先看实例：对话框添加/删除代办目录

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.6.0.js"></script>
</head>
<body>
    <div>
        <input id="input" type="text"/>
        <button id="btn">提交</button>
        <ul id="list">                    //ul > 定义无序列表
            </ul><ul>
        </ul>
    </div>

    <script>
        function Page(){

        }
        $.extend(Page.prototype,{       //extend > 扩展，将单/多个属性/方法等合并到函数原型对象(Page.prototype)上
            init:function(){            //定义函数
                this.bindEvents()
            },
            bindEvents:function(){      //定义函数
                var btn =$('#btn');
                btn.on('click',$.proxy(this.handleBtnClick,this))   
//$.proxy > 改变指针指向，将函数handleBtnClick永远的与实例对象Page.prototype的this绑定
//$('').on > 被选元素及子元素上添加一个或多个事件处理程序
            },
            handleBtnClick:function(){
                var inputvalue =$('#input').val();    //获取输入内容
                var ulelem =$('#list');               //获取标签对象
                ulelem.append('<li>' + inputvalue + '</li>');    //增加内容至标签
                $('#input').val('');                //清空
            }
        })

        var page =new Page()      //new > 创建对象类型的实例或具有构造函数的内置对象的实例
        page.init();              //调用实例对象的方法
    </script>
</body>

jQuery.extend

extend扩展方法原型：

extend(dest,src1,src2,src3...)

它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest。因此，该方法合并后，其实是修改了dest的结构。如果想得到合并的结果却又不修改dest结构，写法如下：

extend({ },src1,src2,src3...)

extend用法：

- 将src合并到jquery的全局对象中

$.extend({
hello:function(){alert('hello');}     //将hello方法合并到jquery的全局对象中
});

- 将src合并到jquery的实例对象中

$.fn.extend({
hello:function(){alert('hello');}        //将hello方法合并到jquery的实例对象中
});

- 在全局对象中扩展一个net命名空间

$.extend($.net,{
hello:function(){alert('hello');}
})

- 根据第一个参数的改变，extend可实现深copy和浅copy

例子中，$.extend(Page.prototype,{整体}), 这个"整体"使得指针形成了链条。如若拆分写成 $.extend(Page.prototype,{1},{1},{1})则报错，各函数指针指向错误。
所以，extend的应用绝不是简单的累加！需要涉及到指针的问题！

jQuery.prototype

它是函数所独有的，它是从一个函数指向一个对象，它的含义是函数的原型对象,也就是这个函数所创建的实例的原型对象。任何函数在创建的时候，其实会默认同时创建该函数的prototype对象。

jQuery.on

$(' ').on > 被选元素及子元素上添加一个或多个事件处理程序

on语法：

$(selector).on(event,childSelector,data,function)

注：on() 方法是 bind()、live() 和 delegate() 方法的新的替代品！

jQuery.proxy

jQuery中的$.proxy官方描述为：

接受一个函数，然后返回一个新函数，并且这个新函数始终保持了特定的上下文语境。

proxy定义和用法：

- 接受一个已有的函数，并返回一个带特定上下文的新的函数。
- 该方法通常用于向上下文指向不同对象的元素添加事件。

proxy语法：

$(selector).proxy(function,context)

- function 要被调用的已有的函数
- context 函数所在的对象的名称

由例子我理解为： function为执行的函数，content为函数的上下文的指针对象this，proxy方法使二者的指针对象永远绑定，function成为了context的引用，避免指针指向错误。

jQuery new

new操作符 > 在JS中，new的作用是通过构造函数来创建一个实例对象

        要创建 Person 的新实例，必须使用 new 操作符。以这种方式调用构造函数实际上会经历以下 4个步骤：
                (1) 创建一个新对象；
                (2) 将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象）；
                (3) 执行构造函数中的代码（为这个新对象添加属性）；
                (4) 返回新对象。