ES5新增的函数的方法

函数的方法
对象的方法
数组的方法
字符的方法
str.indexOf()
function fn(){}
console.log(fn)
改变this指向
fn.bind()

	function fn(){
		console.log(this)
	}
	fn()			//window
	var obj = {};
	obj.show = fn;
	obj.show();		//obj
	使用bind改变this指向
	var obj = {
		name:"admin",
		show:function(){
			console.log(this)
		}
	}
	obj.show()		//obj
	obj.show.bind("hello")();	//hello
	obj.show.bind(123123)();	//123123		
	继承
	var 小A = {
		name:"AAA",
		show:function(){
			console.log(this.name);
		}
	}
	var 小B = {
		name:"BBB"
	}
	小A.show();
	小A.show.bind(小B)();				
	var obj = {
		name:"admin",
		show:function(){
			this
			setTimeout(function(){
				console.log(this)
			}.bind(this),1000)
		}
	}
	obj.show()		
	var 小A = {
		name:"AAA",
		show:function(msg,q,w,e,r,t,y){
			console.log(this.name + msg);
			console.log(arguments)
		}
	}
	var 小B = {
		name:"BBB"
	}
	小A.show("hahahah");
	
	小A.show.bind(小B,"啊啊啊啊啊","1","2","3")("heihiehie");		
	bind()的应用
		使用bind改造事件委托中的this指向		
	bind在结束后,会返回一个新函数,需要再次执行			
### ES6相比ES5新增的主要特性 #### 1. **块级作用域:`let` 和 `const`** - ES6引入了`let`和`const`关键字,用于声明变量。与`var`不同,`let`和`const`具有块级作用域,避免了变量提升问题,从而提高了代码的可读性和安全性[^1]。 #### 2. **箭头函数(Arrow Functions)** - 箭头函数提供了一种更简洁的函数定义方式,并且不会创建自己的`this`绑定,而是继承自外层作用域。这使得在处理回调函数或事件处理器时更加方便[^2]。 ```javascript const add = (a, b) => a + b; ``` #### 3. **模板字符串(Template Strings)** - 模板字符串允许使用反引号(`` ` ``)来定义字符串,并支持多行字符串以及内嵌表达式。通过`${}`语法可以将变量嵌入到字符串中。 ```javascript const name = "Alice"; const greeting = `Hello, ${name}!`; ``` #### 4. **解构赋值(Destructuring Assignment)** - 解构赋值可以从数组或对象中提取数据并赋值给变量,简化了复杂数据结构的访问[^2]。 ```javascript const [first, second] = [1, 2]; const { phone } = { phone: "110" }; ``` #### 5. **默认参数(Default Parameters)** - 函数参数可以设置默认值,当调用函数时未传递对应参数时,会自动使用默认值。 ```javascript function greet(name = "Guest") { return `Hello, ${name}`; } ``` #### 6. **rest 参数与扩展运算符(Rest Parameters & Spread Operator)** - `rest`参数允许将不定数量的参数表示为一个数组,而扩展运算符则可以将数组或对象展开为单独的元素[^2]。 ```javascript function sum(...args) { return args.reduce((a, b) => a + b, 0); } const arr = [1, 2, 3]; console.log(sum(...arr)); ``` #### 7. **模块化(Modules)** - ES6引入了原生的模块支持,通过`import`和`export`关键字可以实现模块的导入与导出,替代了之前依赖第三方库(如RequireJS)的方式。 ```javascript // module.js export const pi = 3.14; // main.js import { pi } from './module.js'; ``` #### 8. **类(Classes)** - 虽然JavaScript本质上仍然是基于原型的,但ES6引入了`class`语法糖,使面向对象编程更加直观和简洁[^2]。 ```javascript class Animal { constructor(name) { this.name = name; } speak() { console.log(`${this.name} makes a noise.`); } } ``` #### 9. **Promise** - `Promise`对象用于异步操作的更好管理,提供了`.then()`和`.catch()`方法来处理成功或失败的结果[^2]。 ```javascript const promise = new Promise((resolve, reject) => { if (true) { resolve("Success!"); } else { reject("Error!"); } }); promise.then(data => console.log(data)).catch(err => console.error(err)); ``` #### 10. **Symbol** - `Symbol`是一种的基本数据类型,用于创建唯一的标识符。它常用于防止对象属性名冲突[^3]。 ```javascript const sym = Symbol("description"); const obj = {}; obj[sym] = "Value"; ``` #### 11. **Proxy 和 Reflect** - `Proxy`对象用于定义自定义行为(如访问、赋值等),而`Reflect`则提供了一系列静态方法来操作对象[^5]。 ```javascript const handler = { get(target, key) { return target[key] || "Default Value"; } }; const proxy = new Proxy({}, handler); console.log(proxy.name); // Default Value ``` #### 12. **Set 和 Map** - `Set`是一个集合数据结构,存储唯一值;`Map`则允许使用任意类型的键值对。 ```javascript const set = new Set([1, 2, 3]); const map = new Map([[1, "one"], [2, "two"]]); ``` #### 使用场景 - ES6的特性广泛应用于现代前端框架(如React、Vue、Angular)以及Node.js后端开发中。例如,箭头函数和解构赋值在编写组件时非常常见,而模块化支持则是构建工具(如Webpack)的基础[^2]。 #### 底层原理 - 特性的底层实现大多依赖于JavaScript引擎(如V8)对ECMAScript标准的支持。例如,箭头函数通过改变词法作用域规则实现了`this`绑定,而`Proxy`则通过拦截器模式动态捕获对象的操作[^5]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值