jquery学习笔记---闭包,原型链,this关键字
网上的资料很多,关于闭包,原型链,面向对象之内的。本人也有一点自己的总结。
关于this:
this 的值取决于 function 被调用的方式,一共有四种,
- 如果一个 function 是一个对象的属性,该 funtion 被调用的时候,this 的值是这个对象。如果 function 调用的表达式包含句点(.)或是 [],this 的值是句点(.)或是 [] 之前的对象。如myObj.func 和myObj["func"] 中,func 被调用时的 this 是myObj。
- 如果一个 function 不是作为一个对象的属性,那么该 function 被调用的时候,this 的值是全局对象。当一个 function 中包含内部 function 的时候,如果不理解 this 的正确含义,很容易造成错误。这是由于内部 function 的 this 值与它外部的 function 的 this 值是不一样的。解决办法是将外部 function 的 this 值保存在一个变量中,在内部 function 中使用它来查找变量。
- 如果在一个 function 之前使用 new 的话,会创建一个新的对象,该 funtion 也会被调用,而 this 的值是新创建的那个对象。如function User(name) {this.name = name}; var user1 = new User("Alex"); 中,通过调用new User("Alex") ,会创建一个新的对象,以user1 来引用,User 这个 function 也会被调用,会在user1 这个对象中设置名为name 的属性,其值是Alex 。
- 可以通过 function 的 apply 和 call 方法来指定它被调用的时候的 this 的值。 apply 和 call 的第一个参数都是要指定的 this 的值。由于它们存在,我们得以创建各种有用的函数。
1
2
3
4
5
6
7
8
9
10
11
12
13
|
var object = { name: "my object" , getnamefunc: function () { var that = this name = "window.name" return function () { alert( this ) return this .name }.call( this ); } } alert(object.getnamefunc()) |
关于new:如果在一个函数前面带上new来调用该函数,那么将创建一个隐藏连接到该函数的prototype成员的新对象。
关于call,apply。call,apply的直接意义就是方法调用,与直接a()调用的区别是,因为js函数的this完全取决于函数调用时的状态,类似闭包这样的结构,this就会指向window全局对象,通过,call可以指定调用函数内的this值。
js的类的写法一般分为闭包,prototype 之于的对象两种。prototype和function对象是js的最特别之处(个人认为最酷的地方,关键是写法非常的灵活而且读起来结构非常清晰),所以一般我喜欢使用第二种方法写js的类。
方法很简单一般是建立空的构造器函数,使其protoype到一个json结构的对象(这样结构会非常清晰)。最后对空的构造器函数new , 创建实例。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
var pri={name: "soso" ,init: function (name){ this .name=name},pri: function (){alert( this .name)}} function _temp(){} _temp.prototype= pri var s = new _temp() s.init(123) s.pri() var ss= new _temp() ss.init(1234) ss.pri() s.pri() var d= new _temp() d.pri() |
问题是如果我想在类中写jquery事件的话,this就会指向击发事件的dom对象而不是函数对象,所以根据作用域,在事件函数前方法函数(pri)中将this属性传给局部变量var i与 var $obj 特别要注意的是必须加上var,否则就是全局变量(成为window全局对象的一个属性,而不是pri方法的私有变量,在创建多个实例的情况下会出错)。
正确写法,加var
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
var p = { name: "soso" , init: function (name, i) { this .obj = name, this .i = i }, pri: function () { var i = this .i //要加var var $obj = this .obj this .obj.click( function () { $obj.html(i); i++ }) this .i = i } } function _temp() { } _temp.prototype = p var s = new _temp() s.init($( "#ee" ), 1) s.pri() var ss = new _temp() ss.init($( "#co" ), 20) ss.pri() |
发现每创建一个实例,需要手动init属性。最后一步完善,利用arguments,apply完善构造器函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
var p = { name: "soso" , init: function (name, i) { this .obj = name, this .i = i }, pri: function () { var i = this .i //要加var var $obj = this .obj this .obj.click( function () { $obj.html(i); i++ }) this .i = i } } function _temp() { this .init.apply( this ,arguments) } //apply调用初始化方法,arguments获得参数 _temp.prototype = p var s = new _temp($( "#ee" ), 1) s.pri() var ss = new _temp($( "#co" ), 20) ss.pri() |
在这一过程中,也理解了 var p={ inti:function(){this.name=“###”}}与 var p={init:function(){p.init.name=“###”}}的本质区别
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
$(document).ready( function () { var p = { init: function (obj, name) { p.init.j = name //此处用对象名代替this对象,写法是错误的, // 区别在于使用this时,建立的对象是对prototype继承的属性重写,而此处对象名的操作则是直接对原型的修改。所有继承此原型的对象的该属性的值都会被修改 this .obj = obj obj.html(p.init.j) }, pri: function () { this .obj.click( function () { p.init.j++ $( this ).html(p.init.j) }) }} function temp() { this .init.apply( this , arguments) } temp.prototype = p; var k1 = new temp($( ".div1" ), 2) k1.pri() var k2 = new temp($( ".div2" ), 25) k2.pri() }) |
错误示例
jquery学习笔记---闭包,原型链,this关键字的更多相关文章
- Jquery学习笔记---闭包
1. 简要介绍 闭包可谓是js中的一大特色了,即使你对闭包没概念,你可能已经在不知不觉中使用到了闭包.闭包是什么,闭包就是一个函数可以访问到另一个函数的变量.这就是闭包,解释起来就这么一句话,不明白? ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- jQuery 学习笔记:jQuery 代码结构
jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...
- jQuery学习笔记(一):入门
jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- jQuery学习笔记之概念(1)
jQuery学习笔记之概念(1) ----------------------学习目录-------------------- 1.概念 2.特点 3.选择器 4.DOM操作 5.事件 6.jQuer ...
- 初步学习jquery学习笔记(三)
jQuery学习笔记三 jquery停止动画 stop函数的初步功能 <!DOCTYPE html> <html lang="en"> <head&g ...
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- JQuery学习笔记——层级选择器
JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...
随机推荐
- 在 2017 年将会更加流行的 6 个 Web 开发趋势
2016即将过去,2017就要来临. 前阵子看到很多对2016前端领域的总结,也是有人欢喜有人忧啊. 转发了这一篇2017web的发展趋势.那么到底会是怎么样的一个发展趋势的,只好拭目以待了. 201 ...
- python解释器快捷键
13. 交互式输入的编辑和历史记录 某些版本的 Python 解释器支持编辑当前的输入行和历史记录,类似于在 Korn shell 和 GNU Bash shell 中看到的功能.这是使用GNU Re ...
- CCActionManager
当CCnode执行runAction的时候,runAction会调用动作管理类的addAction方法将它自己执行的动作传递给动作管理类,动作管理类再将动作添加到自己的动作序列中. 动过管理类通过定时 ...
- [BZOJ1901]Zju2112 Dynamic Rankings
[BZOJ1901]Zju2112 Dynamic Rankings 试题描述 给定一个含有n个数的序列a[1],a[2],a[3]--a[n],程序必须回答这样的询问:对于给定的i,j,k,在a[i ...
- Unity3D Pro破解
Win破解方法: 全新安装Unity且未打开Unity后!!! 下载程序, 右键管理员运行, 点击Browse选择Unity安装目录内的Editor文件夹, 确定. 然后点击大按钮PATCH即可, 如 ...
- getopt函数的使用——分析命令行参数
getopt(分析命令行参数) getopt(分析命令行参数) 短参数的定义 返回值 范例 getopt_long 相关函数表头文件#include<unistd.h> 函数声明int g ...
- Scala教程
Scala表示可扩展性语言,是一种混合函数式编程语言.它是由Martin Odersky创建,并于2003年首次发布. Scala平滑地集成面向对象和函数式语言的特点,并且Scala被编译在Java虚 ...
- 使用WITH AS提高性能简化嵌套SQL
一.WITH AS的含义 WITH AS短语,也叫做子查询部分(subquery factoring),可以让你做很多事情,定义一个SQL片断,该SQL片断会被整个SQL语句所用到.有的时候,是为了让 ...
- Unity3d 枚举某个目录下所有资源
using UnityEngine; using System.Collections; using UnityEditor; using System.Collections.Generic; us ...
- Qt 子窗体嵌入父窗体
1.创建个子窗体QDialog.在子窗体构造函数添加 Dialog::Dialog(QWidget *parent) : QDialog(parent), ui(new Ui::Dialog) { u ...