var obj={fn1.function (){console.log(this)},fn2()=>{console.log(this)}} obj.fn1();obj.fn2()

时间: 2023-12-17 22:02:19 浏览: 119

jQuery中extend()和fn.extend()方法详解

jQuery自定义了jQuery.extend()和jQuery.fn.extend()方法.其中jQuery.extend()方法能够创建全局函数或者选择器,而jQuery.fn.extend()方法能够创建jQuery对象方法. jQuery中的`extend()`和`fn.extend()`方法是用于合并对象属性和方法的工具，它们在扩展和定制jQuery功能时起着关键作用。 `jQuery.extend()`方法允许开发者将一个或多个对象的属性和方法合并到一个现有对象上，通常是jQuery核心对象。这可以用来创建全局函数或自定义选择器。例如，下面的代码将`hehe`函数添加为全局函数： ```javascript $.extend({ hehe: function() { alert('hehe'); } }); $.hehe(); // 显示警告框 'hehe' ``` 此外，`jQuery.extend()`也可以用于深拷贝对象，这意味着不仅复制属性，还复制嵌套的对象和数组。例如： ```javascript var obj1 = {name: 'Tom', age: 22}; var obj2 = {name: 'Jack', height: 180}; // 合并obj1和obj2，修改obj1 $.extend(obj1, obj2); console.log(obj1); // Object {name: "Jack", age: 22, height: 180} ``` 如果你想保留原始对象而不修改它们，可以提供一个空对象作为第一个参数，这样合并的结果将存储在空对象中： ```javascript var obj1 = {name: 'Tom', age: 22}; var obj2 = {name: 'Jack', height: 180}; var empty = {}; $.extend(empty, obj1, obj2); console.log(empty); // Object {name: "Jack", age: 22, height: 180} ``` 接下来，`jQuery.fn.extend()`方法则用于向jQuery对象的实例方法扩展功能，即添加或修改jQuery对象的方法。它通常用于编写jQuery插件，因为它使新方法可以在所有jQuery选择器的结果集上使用。比如，以下代码会向所有图片元素添加一个`setTitle`方法： ```javascript $.fn.extend({ setTitle: function(title) { this.attr('title', title); } }); $('img').setTitle('Image Title'); ``` 在上面的例子中，`setTitle`现在可以应用于任何jQuery选择器返回的元素集合，如`$('img')`。 `jQuery.fn.extend()`方法的一个常见用途是创建自定义动画效果或处理事件，因为它将新方法添加到jQuery的原型链中，使得这些方法可以像其他内建的jQuery方法一样使用。 `jQuery.extend()`和`jQuery.fn.extend()`都是jQuery扩展性的重要组成部分。前者用于全局功能扩展，后者用于jQuery对象实例的功能扩展。了解并熟练使用这两个方法，可以使jQuery开发更加灵活和高效。

这段代码中有一个语法错误，应该是 var obj={fn1:function (){console.log(this)},fn2:()=>{console.log(this)}}。在执行 obj.fn1() 时，this 指向 obj 对象；而在执行 obj.fn2() 时，this 指向 obj 对象所在的作用域（一般情况下指的是全局对象）。

阅读全文

var obj={fn1.function (){console.log(this)},fn2()=>{console.log(this)}} obj.fn1();obj.fn2()

相关推荐

jQuery插件开发：$.extend()与$.fn应用解析

JavaScript中的this谜题与绑定规则解析

<script> str = "window"; const obj = { str: "object", fn: () => { console.log(this.str); }, fn2: function () { console.log(this.str); return { str: "newObj", fn: () => { console.log(this.str); } } }, }; obj.fn(); obj.fn2(); </script>

var num = 100; var obj = { num: 50, fn: function () { console.log(this.num); } } for (var i = 0; i < 10; i++) { setTimeout(function () { console.log(i); }, 0) } new Promise(function (resolve) { resolve() var fn2 = obj.fn; fn2(); }).then(function () { obj.fn() })

var length = 20; function fn() { console.log(this.length); } var obj = { length: 10, method: function(fn) { fn(); arguments[0](); } }; obj.method(fn, 1,"aa");

浅谈jquery中的each方法$.each、this.each、$.fn.each

Jquery实现$.fn.extend和$.extend函数

jQuery.extend和jQuery.fn.extend的区别

jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析

jQuery中extend()和fn.extend()方法详解

JavaScript语言中this指向研究 (1).pdf

前端大厂最新面试题-this.docx

详解JavaScript中this关键字的用法_.docx

深入理解js函数的作用域与this指向.docx

JavaScript程序设计-javascript中this的指向问题.pdf

两句话理解js中的this1

JavaScript中Function函数与Object对象的关系

Javascript中神奇的this

浅谈JavaScript 中的this

最新推荐

Vue2 全家桶 + Vant 搭建大型单页面商城项目 新蜂商城前床分离版本-前端Vue 项目源码.zip

【创新未发表】基于matlab沙猫群算法SCSO-PID控制器优化【含Matlab源码 9671期】.zip

基于MySQL+Spark+Echarts+SpringBoot的豆瓣电影数据可视化项目源码+文档说明

vue chrome 扩展模板.zip

Angular实现MarcHayek简历展示应用教程

管理建模和仿真的文件

深入剖析：内存溢出背后的原因、预防及应急策略（专家版）

Java中如何对年月日时分秒的日期字符串作如下处理：如何日期分钟介于两个相连的半点之间，就将分钟数调整为前半点

Crossbow Spot最新更新 - 获取Chrome扩展新闻

"互动学习：行动中的多样性与论文攻读经历"

Vue2 全家桶 + Vant 搭建大型单页面商城项目新蜂商城前床分离版本-前端Vue 项目源码.zip