`
FlyAway2
  • 浏览: 111626 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

js函数解读

    博客分类:
  • js
阅读更多

虽然很早就接触js了,但是一直以来都学得不好,只有半桶水,基本只够简单应用。复杂的什么例如写js控件,修改js库源码就无能为力了。虽然不是什么前端工程师,但是经常用到,所以还是学好点吧。。。

 

对一些概念不清楚,写函数的时候也只是非常小心,然而还是有问题,于是就调试来调试去,效率非常低。这几天有点空闲。写了测试例子,一下子清楚多了。

 

this 的含义

a . 在js文件的最顶层 直接调用时:

//在js文件的最顶层

//alert(this);//[object Window]  为此“全局变量”window,
var thisTest=function asYouLike(x,y) {
	//alert(userManager.bbb);
	this.ma = x;// 相当于给Window增加属性---- 但这是不会成功的,因为Window属性只读,不可写
	this.mb = "MA"; 
	alert("thisTest call by globe object: this = "+this);//this 为调用modify函数的对象:[object Window]---为什么不是button?这是js的实现机制决定的
	alert("this.ma = "+this.ma);// 当使用new操作符的时候,this指向新建的对象!否则。。。因为之前window没定义名为ma的变量,所以undefined
	alert("this.mb = "+this.mb);//undefined
	alert("this.mc = "+this.mc);//undefined
}
thisTest();

 

 

b. 当把thisTest当做一个类( new+ 函数名+() )时:this所表示的意思会不同

// 几乎同样的代码
var thisTest=function asYouLike(x,y) {
	this.ma = x;
	this.mb = "MA"; 
	alert("thisTest call by a class object: this = "+this);//
	alert("this.ma = "+this.ma);// 当使用new操作符的时候,this指向新建的对象!==== undefined 因为没有传入x 
	alert("this.mb = "+this.mb);//"MA"
	alert("this.mc = "+this.mc);//undefined 因为它没定义
}
var tt = new thisTest();

 

函数

//可以这么调用
var testFunc = function(x,y,z) {
	this.name = x;
	this.age = y;
	testvar = z;
	alert("Hello boy!");
	alert("this:"+this+" x:"+x+" y:"+y+" z:"+z);
}
testFunc();
alert(testFunc);//

//也可以简单直接的这么调用:在这种情况下,testFunc为匿名函数返回值;匿名函数只能被调用一次
var testFunc2 = function(x,y,z) {
	this.name = x;
	this.age = y;
	testvar = z;
	alert("Hello boy!");
	alert("this:"+this+" x:"+x+" y:"+y+" z:"+z);
}();
alert(testFunc2);//undefined

 

 

 

 

 函数中变量的用法--作用域、读取的方式

//函数中变量的用法--作用域、读取的方式
var fa = " global var fa";
var fb = " global var fb";
var func = function () {
	var fa = 11;
	var ff = function(){
		alert(fa);//原型链方式读取:首先从当前函数func中读取,找不到则..最后从全局对象中读取
		alert(this.fa);//注意this在这里起的作用,他指向全局对象,所以直接从全局对象读取
		alert(this.fb);
	}
	ff();
}
//func.ff();//TypeError: f.ff is not a function
func();

 

 

对象/类

 

//对象/类
//函数 ------ 其实又可当做对象的构造函数
var Person = function(name,age){
	this.name = name;
	this.age = age;
	this.birthday = new Date();
	this.toString = function (){
		return "Person:name="+this.name+"/age="+this.age;
	};
}

var person = new Person("lk",26);
alert(person.age);


var globeFunc = function(x,y,z) {
 this.name = x;// 此处悄然改变了this(调用者) 的name值!!!
 this.mc = "MMCC";
 testvar = z;
 
 
 
 alert("this:"+this+" x:"+x+" y:"+y+" z:"+z);//this:Person:name=1/age=26 x:1 y:2 z:undefined
}
globeFunc.call(person,1,2);

 

//小结: 函数中this跟调用环境息息相关,谁调用了这个函数,this就是谁 
//小结: 对象中方法的 this ? 一般情况下就是所属的对象,但是,如果用apply/call来调用呢?

如果使用函数的call、apply来调用函数,则函数里面this的为传入的this参数,此时需要特别注意! 否则引起错误!!!

 

 

 

闭包:

闭包是一个比较难理解的概念,特别是对应初学者,难以真正理解,我曾经试着去理解,找了很多资料,看了很多文档,却对这个概念依然模糊,说不清道不明——当然一旦真正理解,则发现很简单了,像我现在这样;———— 所以说有些东西还是得自己亲自动手,做些小实验。所谓百读不如一练

 

//闭包
//非闭包的情况
var Car = function(speed,num,miles){
	var speed = speed;
	return{
		run:function(){
			alert("running");
		},
		start:function(){
			alert("start");
		},
		stop:function(){
			alert("stop");
		}
	}
}
//Car.run();// Car.run is not a function -- 此时Car还不是一个对象
var car = new Car();
car.run();//car还只是一个对象,当然可以这么调用
alert(car.speed);// undefined
//无法访问闭包的属性,因为闭包的属性相当于被限制为private了
//speed 并不属于调用者的属性,此时可以当做闭包的属性了

//闭包的情况
var Dog = function(name,age,height){
	var name = name;
	return{
		bart:function(){
			alert("wong! wong! wong!!!");
		},
		eat:function(){
			alert("eat");
		},
		sleep:function(){
			alert("sleep");
		}
	}
}()
Dog.bart();// 此时Dog已经是一个对象 ---- 建立一个函数,然后执行它,返回return语句后面的对象!

// 所以说闭包实现的关键是 
1 创建一个函数并立即执行它,使用()运算符
2 函数中的return语句中返回一个对象--- 否则函数值就是undefined

 

——————

// 要立即,return 返回{} 就是一个对象!—— 其实稍微想想也就知道,只是一直就没这么想过。。。
// 否则如果没有return,建立一个函数,然后执行它 --- 返回undefined

 

var Man = function(name,age){
	this.name = name;
	this.age = age;
	this.mc = "MMCC";
	this.speak = function (){
		alert("Man:name="+this.name+"/age="+this.age);
	};
}();
//Man.speak();// Man is undefined--- 这种方式却不行

var Woman = function(name,age){
	this.name = name;
	this.age = age;
	this.mc = "MMCC";
	this.speak = function (){
		alert("Woman:name="+this.name+"/age="+this.age);
	};
	return{
		run:function(){
			alert("a woman is running");
		}
	}
}();
//Woman.run();// 现在又可行了!
//Woman.speak();//Man.speak is not a function 现在报这个错了,不是Woman is undefined

 

 

 

函数的嵌套

// 函数的嵌套
var Nest = function(name,age){
	this.name = name;
	this.age = age;// 不能写成 age = age;?这当然是不行的
	this.mc = "MMCC";
	var th = this;
	this.speak = function (){
		//alert(th);[Object]
		alert(this);// 此处的this 指的是new出来的Nest对象
		alert("Nest:name="+this.name+"/age="+this.th);
		th.speakAlout = function (){// 如果不加this, th 从哪里获取呢?从当前对象,找不到就是全局对象
			alert("a Nest is running");
		}
		obj.objFunc = function (){
			alert("==objFunc==");
		}
//		th.speak.speakAlout = function (){// 如果不加this, th 从哪里获取呢?
//			alert("a Nest is speakAlout");
//		}
		nestFunction = function (){//这样的嵌套函数是怎么调用的呢??
			alert("a Nest function  is running/this is:"+this);//此时的this为[object Window] ?怪怪的
		}
		//nestFunction();//这样调用
		this.toString = function (){
			return "next.speak";
		}
	};
	this.toString = function (){
		return "next.object";
	}
	var fasf = function() {//可以写这种函数/属性,但实际上,它是private的,外面无法调用
		alert(1231312);
	}
	fasf();
//	return{
//		run:function(){
//			alert("a woman is running");
//		}
//	}
};
var nest = new Nest("lk","123");//TypeError: Nest is not a constructor
nest.speak();// 因为speakAlout是在speak定义的,所以要先执行speak(),才能找到speakAlout
nest.speakAlout();

alert("this.nestFunction=="+this.nestFunction);// 在nest.speak()之后nestFunction已经变成了一个全局函数!
alert(nest.speak.speakAlout);//undefined 否则,直接显示函数内容

nest.fasf();//nest.fasf is not a function
nest.speak.speakAlout();//TypeError: nest.speak.speakAlout is not a function

 

 

 注意:在嵌套的函数里面,this总是对应window(稍微有点疑问)

 

//闭包中嵌套呢?(闭包的-closure)
var closure_nest = function(name,age){
	var f = function() {//可以写这种函数/属性,但实际上,它是private的,外面无法调用
		alert("im a private function ! ");
		var f_nest = function() {//可以写这种函数/属性,但实际上,它是private nest的,外面更加无法调用
			alert("im a private nest function ! ");
		}
		this.f_nest_g = function() {//可以写这种函数/属性,但实际上,它是private nest的,外面更加无法调用
			alert("im NOT a private nest function !im globe ");
		}
	}
	//alert(this);// [object Window]
	return {
		ff:function() {//可以写这种函数/属性,但实际上,它是private的,外面无法调用
			//alert("im a private function ! ");
			ff_nest = function() {//可以写这种函数/属性,但实际上,它是private nest的,外面更加无法调用
				alert("im a private nest function ! ");
			}
			this.ff_nest_g = function() {//可以写这种函数/属性,它是属于的return返回的对象的,通过闭包方式调用
				alert("im NOT a private nest function !im closure ");
				ff_nest_nest = function() {//可以写这种函数/属性,似乎可以永远继续嵌套!
//					alert("im a private nest nest function ! this aaa:"+this);//此处的this对应window !
					ffasf = function() {
						alert(987923233+""+this);// N里面嵌套,此处永远的this对应window 
					}();
				}
				ff_nest_nest();
			}
			this.toString = function () {
				return " closure_nest ff this.toString  ";
			}
			toString = function () {// 相当于重写了 window 的toString 函数
				return " closure_nest ff  nested  toString 相当于window的toString  !";
			}
			wirld = function () {
				ff_nest123 = function() {
					alert("im a private nest nest function ! ");
					alert(this);// 此处的this对应window !
//					this.fffff();
				}
				ff_nest123();
				return " closure_nest ff  nested  toString ";
			}
			fffff = function(){
				alert(" fffff ! ");
			}
			wirld();
//			ff_nest();
//			alert(this);// 此处的this 又是不同含义!// 调用this.toString
		}
	}
	// return {}后面的语句都不会执行
	alert(4444);
	ff_nest();
	toString = function () {
		return (" closure_nest ");
	}
}();

//ff_nest_g();// ReferenceError: ff_nest_g is not defined

//closure_nest.ff_nest();// undefined
closure_nest.ff();
closure_nest.ff_nest_g();//在ff之后,也能正常调用 

 

 

 

分享到:
评论

相关推荐

    JS函数集合大全

    根据给定的文件信息,以下是对“JS函数集合大全”的详细知识点解读: ### 1. 输出到文档 - `document.write("")`:此方法用于在HTML文档中写入文本或HTML代码。 ### 2. 注释 - `JSеעΪ//`:这表示JavaScript中的...

    underscore-analysis, underscore-1.8.3.js 源码解读 & 系列文章(完 ).zip

    源码解读的过程中,会发现underscore.js大量使用了闭包、函数表达式、立即执行函数(IIFE)等JavaScript高级特性,这些对于提升JavaScript编程技巧至关重要。例如,它使用IIFE来封装库,防止全局变量污染,同时也实现...

    JS按钮倒计时函数

    ### 二、详细解读给出的代码 #### 1. 函数定义 首先,我们来看一下给出的代码: ```javascript function settime(obj, count, max) { //... } ``` 这里定义了一个名为`settime`的函数,该函数接收三个参数: - ...

    匿名函数的一点知识

    ### 知识点:匿名函数在JavaScript中的应用与特性 #### 标题解析:“匿名函数的一点知识” 标题“匿名函数的一点知识”简洁明了地指出本文将围绕JavaScript中的匿名函数进行讲解,旨在帮助读者深入理解匿名函数的...

    PHP加密函数 Javascript/Js 解密函数

    而所谓的“Javascript/Js解密函数”则试图通过相同的密钥和算法来还原原始的字符串。它使用了与加密相同的key和循环逻辑。通过base64解码和XOR操作,尝试恢复出经过加密处理的数据。 然而,文档中的加密方法存在...

    jQuery选择器源码解读(八):addCombinator函数

    在详细解读addCombinator函数之前,我们先了解下jQuery选择器和Sizzle引擎的基本概念。jQuery选择器允许开发者通过特定的语法选取页面中的DOM元素集合。Sizzle是jQuery所使用的底层选择器引擎,它是用来解析和执行...

    (js)按下enter键执行函数

    ### (js)按下Enter键执行函数 在前端开发过程中,我们经常会遇到需要监听用户键盘输入并根据特定按键触发相应操作的场景。一个典型的例子就是当用户按下“Enter”键时执行某个函数。这种方式广泛应用于搜索框、...

    javascript 内置函数速查.txt

    根据给定的文件信息,以下是对“javascript内置函数速查”的详细解读,涵盖了JavaScript中关键的内置函数和语法,帮助理解和应用这些基本概念。 ### 1. 文档操作 - **`document.write()`**: 此函数用于在文档流中...

    利用javascript函数对网站数据库进行加密的方法

    本文将深入探讨如何利用JavaScript函数来对网站数据库进行加密,以提升数据的安全性。 首先,我们需要理解JavaScript在数据库加密中的角色。JavaScript可以用于生成加密密钥、执行加密算法以及解密数据。通常,这种...

    详细解读Jquery各Ajax函数:$.get(),$.post(),$.ajax(),$.getJSON()

    在深入探讨Jquery中的Ajax函数之前,我们先简要了解Ajax(Asynchronous JavaScript and XML)的概念。Ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。这使得Web应用程序可以更加流畅地运行,...

    详解javascript函数的参数

    以下是对JavaScript函数参数相关知识点的详细解读。 首先,JavaScript是一种弱类型语言,这意味着在函数定义时不需要指定参数的数据类型。函数可以接受任意数量的参数,无论是在定义时还是在调用时。这种特性使得...

    dlut可视化大作业3————复变函数积分可视化

    3. **可视化技术**:为了呈现复变函数积分的过程,学生需要掌握可视化编程技术,如OpenGL、Three.js等,这些工具可以帮助创建交互式三维图形,以动态的方式展示积分路径和结果。 4. **纹理贴图法**:从压缩包子文件...

    js代码-js evil函数测试

    在`main.js`这个文件中,我们可以预期找到一些JavaScript代码,可能包含了上述提到的"evil"函数。通过分析和测试`main.js`,我们可以了解代码的安全性,并学习如何避免或安全地使用这些函数。`README.txt`文件可能是...

    解读node.js-api文档.pdf

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,它允许开发者在服务器端使用 JavaScript 编程。本文档主要解读的是 Node.js 的 API 文档,涵盖了一些核心的全局对象、控制台操作、模块系统以及计时器等...

    JS函数的定义与调用方法推荐

    JS函数是JavaScript编程中非常重要的组成部分,它帮助开发者组织和重用代码。下面将详细介绍JS函数的定义与调用方法。 首先,JS函数的定义可以分为...以上就是对JS函数定义与调用方法的详细解读,希望对您有所帮助。

    0274-极智开发-解读React函数式组件和类式组件

    0274_极智开发_解读React函数式组件和类式组件

    0421-极智开发-解读Vue3入口文件createApp函数

    0421_极智开发_解读Vue3入口文件createApp函数

    js打印纸函数代码(递归)

    标题和描述中提到的js打印纸函数代码(递归)所涉及的知识点主要是JavaScript语言编写的一个用于获取打印纸规格尺寸的函数。此函数利用ISO 216标准中的纸张尺寸体系,其中A0纸的尺寸为841mm宽和1189mm高,B0纸为1000...

    解读GA客户端JS代码

    ### 解读GA客户端JS代码 #### 一、概述 Google Analytics (GA) 是一款非常流行的网站分析工具,它能够提供详尽的网站流量统计数据及用户行为分析报告,帮助企业更好地了解访客行为,优化网站结构与内容。GA客户端...

    Ext JS 提示消息的 函数

    根据给定的文件信息,我们可以总结出以下关于Ext JS中提示消息函数的相关知识点: ### Ext JS中的提示消息 #### 1. **Ext.MessageBox.confirm方法详解** `Ext.MessageBox.confirm`是Ext JS库中用于显示带有确认...

Global site tag (gtag.js) - Google Analytics