JavaScript 函数

文章目录

    • 1. 函数定义
    • 2. 命名空间
      • 2.1 简单介绍
      • 2.2 使用场景分析

1. 函数定义

1. 通用函数声明,不会立即调用,在使用的时候使用函数名调用
2. 通过表达式进行定义,使用变量名进行调用
3. 自调用函数,函数会自己自动调用(匿名函数, 不能进行声明或者定义)
4. 函数在Js当中视为对象(拥有属性和方法)
5. 箭头函数(默认绑定外层this值)

补充:函数表达式监视使用const代替var,常量更加安全
// 1. 通用函数声明,不会立即调用,在使用的时候使用函数名调用
	function Myfunction(word) {
	    console.log(word);
	}
	Myfunction("hello, word");

// 2. 通过表达式进行定义,使用变量名进行调用
	var Myfunction = function (word) {
	    console.log(word);
	}
	Myfunction("hello, word");

// 3. 自调用函数,函数会自己自动调用,自身添加括号,声明其为函数表达式,紧跟()则会自动调用
	(function () {
	    console.log("hello");
	})();

// 4. 函数在Js当中视为对象
	function myFunction(word){
		console.log(word);
	};
	
	console.log(myFunction.length);
	console.log(myFunction.toString());

// 5. 箭头函数
// (参数1, 参数2, …, 参数N) => { 函数声明 }
// 5.1 若参数单一,则()可以省略
	myFunction = word => {
		console.log("函数成功被调用....");
	    console.log(word);
	}
	
	myFunction("hello, world...");
// 5.2 若函数表达式单一,则{}可以省略. (且如果单一表达式是return, return也可省略)
	myFunction = (x, y) => console.log(x + " " + y); // {}省略
	myFunction("AA", "BB");
	
	myFunction2 = (x, y) => x * y; // return省略
	console.log(myFunction2(3, 4));

2. 命名空间

2.1 简单介绍

	命名空间可被看作位于一个唯一标识符下的代码单元的逻辑组合(帮助我们避免在全局空间中和其他
对象或者变量出现冲突)
// 1.命名空间定义 
	var namespace = {}; // 我们使用简单对象来模拟命名空间的使用
// 2.常用方式(可以防止重复定义被覆盖掉,如果之前已经定义则会直接将之前的空间赋值给当前)
	var namespace = window.namespace || {};

2.2 使用场景分析

  a. 最顶层对象是window,我们创建自己的命名空间(即简单对象),往往都是放在window对象的下一层,我们使用window.namespace || {} 的作用是为了避免在此层我们在加入自己的Js文件的时候与之前命名空间发生碰撞。
  对于大型的Js代码,我们往往都只有两层结构,window对象,和直接相继承的第二层子层,添加命名空间都是向第二层添加,我们使用 || 尽量避免碰撞,一旦碰撞就会沿用,导致额外加入的此层命名空间全部失效(不会造成命名空间覆盖)

var namespace = {
	x: 1
}

var namespace = namespace || {};
console.log(namespace.x); // 1, 不会造成数据的覆盖,会继续沿用最开始的命名空间.


  b. 向已经存在的Js文件当中增添数据,通常格式分析

var namespace = namespace || {};
(function(){
	// 增添的数据
}).call(namespace);
  1. 添加的Js文件就是直接放入到window对象下方,就是相当于向全局对象中加入,在数据部分如果是直接添加数据,没有加入this属性,都会被视为方法内的变量和方法,运行完成直接消失
var x = 1;
var MyFunction = function () {
	console.log("原有全局对象...");
}

console.log(x); // 1
MyFunction(); // 原有全局对象...

var namespace = namespace || {};
(function () {
	var x = 2; // 只在此匿名函数内有效,局部变量
	var MyFunction = function () { // 只在此匿名函数内有效,局部函数
		console.log("更新全局对象...");
	}
	
	console.log(x); // 2
	MyFunction(); // 更新全局对象...

}).call(namespace);

console.log(x); // 1
MyFunction(); // 原有全局对象...
  1. 因为数据添加是相当于直接向全局环境当中添加的,如果如上一次自身规范使用var进行定义,那就是直接运行不会对原有数据造成任何影响(因为都是相当于局部数据,会优先调用),但是如果没有添加var,则会直接对原有全局变量全局函数造成覆盖
var x = 1;
var MyFunction = function () {
	console.log("原有全局对象...");
}

console.log(x); // 1
MyFunction(); // 原有全局对象...

var namespace = namespace || {};
(function () {
	x = 2;
	MyFunction = function () {
		console.log("更新全局对象...");
	}
	
	console.log(x); // 2
	MyFunction(); // 更新全局对象...
	
}).call(namespace);

console.log(x); // 2
MyFunction(); // 更新全局对象...
  1. 因为我们不想对原有数据进行覆盖所以我们通常肯定是需要对内部添加的变量、方法通常肯定是需要加入var的。但是假如我们想要对数据进行长久的保存通常我们会使用call关键字,使用此关键字,可以将匿名函数自动执行的内部的变量和函数统统加入到namespace对象当中,并通过namespace对象在全局环境当中长久保留。
var x = 1;
var MyFunction = function () {
	console.log("原有全局对象...");
}

console.log(x); // 1
MyFunction(); // 原有全局对象...

var namespace = namespace || {};
(function () {
	// this 代指 namespace对象
	this.x = 2;
	this.MyFunction = function () {
		console.log("更新全局对象...");
	}
}).call(namespace);

console.log(namespace.x); // 2
namespace.MyFunction(); // 更新全局对象...
	
console.log(window.x); // 1
window.MyFunction(); // 原有全局对象...

你可能感兴趣的:(JavaScript,javascript,c#,开发语言)