JavaScript的动态特性(通过eval,call,apply和bind来体现)

JavaScript的动态特性(通过eval,call,apply和bind来体现)

1. eval函数

eval(alert("汪峰又上头条了！"));  // -->汪峰又上头条了！
alert(window.eval === eval);   // -->true
alert(eval in window);         // -->false

不可枚举的

eval()括号里面可以执行语句

eval的作用域问题

var i = 100;
function myFunc() {
var i = "text";
window.eval('i = "hello"');
alert(i);  // 现代浏览器提示text，IE6-8提示hello
}
myFunc();
alert(i); // 现代浏览器提示hello，IE6-8提示100

不同的浏览器JS引擎对eval函数的作用域设定是不一样的

window.eval函数

JScript内核

var i = "text"

window.eval

i=100

window.eval

eval

var i = 100;
function myFunc() {
var i = "text";
eval('i = "hello"');
}
myFunc();
alert(i); // -->100

eval

window

2. apply和call

2.1 apply和call的基本用法

var name = "JaminQian",
obj = {
name: "ManfredHu"
};

function myFunc() {
alert(this.name);
}
myFunc();         // -->JaminQian
myFunc.call(obj); // -->ManfredHu

window

function Animal(){
this.name = "Animal";
this.args = arguments; //在实例上缓存构造函数的参数
this.showName = function(){
console.log(this.name);
};
this.getArgsNum = function(){
console.log(this.args);
}
}

function Cat(num1,num2,num3){
Animal.apply(this,arguments); //继承Animal
this.name = "Cat";
}

function PersianCat(){ //波斯猫
Cat.apply(this,arguments); //继承Cat
this.name = "PersianCat";
}

var animal      = new Animal();
var cat         = new Cat(1,2,3);
var PersianCat  = new PersianCat([1,"2",[3]]);

//输出this.name
animal.showName(); //-->Animal
animal.showName.call(cat); //-->Cat
animal.showName.call(PersianCat); //-->PersianCat

//获取构造函数的参数
animal.getArgsNum();    //-->[]
cat.getArgsNum();       //-->[1,2,3]
PersianCat.getArgsNum();//-->[[1,"2",[3]]]

Animal->Cat->PersianCat(波斯猫)

call

name

2.2 apply和call的实用用法

2.2.1 获取数组的最大值、最小值

var numbers = [5,"30",-1,6, //这里定义了一个数组，numbers[1]是一个字符串"30"
{
a:20, //其中最后一个元素是一个对象，重写了valueOf方法
valueOf:function() {
return 40
}
},
];
//求数组的最大最小值
var max = Math.max.apply(Math,numbers),
min = Math.min.call(Math,-10,2,6,10);
console.log(max); //-->40
console.log(min); //-->-10

Object.prototype.toString()

Object.prototype.valueOf()

valueOf

"30"

2.2.2 在原来的数组追加项

Array.prototype.concat()

var arr1 = [22, 'foo', {
age: "21"
}, -2046];
var arr2 = ["do", 55, 100];
var arr3 = arr1.concat(arr2);
console.log(arr3); //-->[22, "foo", Object, -2046, "do", 55, 100]

push

var arr1 = [22, 'foo', {
age: "21"
}, -2046];
var arr2 = ["do", 55, 100];
Array.prototype.push.apply(arr1,arr2); //注意这里用的是apply，传入的是数组
console.log(arr1); //-->[22, "foo", Object, -2046, "do", 55, 100]

2.2.3 验证数组类型

isArray

isArray

Array.isArray()

function isArray(value) {
if(typeof Array.isArray === "function") { //ES5新增加的判断数组的方法，IE9+支持
return Array.isArray(value);
} else {
return Object.prototype.toString.call(value) === "[object Array]";
}
}

Object.prototype.toString()

"[object Array]"

typeof

number

string

boolean

undefined

typof

instanceof

Object.prototype.hasOwnProperty

constructor

iframe

typeof foo === "function"

2.2.4 类数组用数组的方法

var arr = [];
var slice = arr.slice; //数组的slice方法
toArray: function() {
return slice.call( this ); //这里就是可以将类数组转化为可以用原生数组的一个方法
},

slice

concat

3. bind函数

3.1 jQuery中的bind方法

on

$( "#foo" ).bind( "click", function() {
alert( "User clicked on 'foo.'" );
});

id

foo

click

$( "#foo" ).bind( "mouseenter mouseleave", function() {
$( this ).toggleClass( "entered" );
});

.bind()

3.2 原生JavaScript中的bind方法

Function.prototype

Function.prototype.bind

bind

console.log(Function.prototype.bind); //-->bind() { [native code] }

if (!Function.prototype.bind) {
Function.prototype.bind = function (oThis) {
if (typeof this !== "function") { //调用的不是函数的时候抛出类型错误
throw new TypeError("Function.prototype.bind() error");
}

var aArgs = Array.prototype.slice.call(arguments, 1),
fToBind = this, //缓存this，调用返回的函数时候会用到
fNOP = function () {},
fBound = function () {
//用闭包缓存了绑定时候赋予的参数，在调用的时候将绑定和调用的参数拼接起来
return fToBind.apply(this instanceof fNOP
&& oThis ? this : oThis
|| window,
aArgs.concat(Array.prototype.slice.call(arguments)));
};

fNOP.prototype = this.prototype;
fBound.prototype = new fNOP();

return fBound;
};
}

function foo() {
console.log(this.name);
console.log(arguments);
}
var obj = {
name: 'ManfredHu'
}

//将foo绑定obj的作用域，返回一个绑定了作用域的新的函数
var newFunc = foo.bind(obj, '我是参数1', '我是参数2');
newFunc();

//output:(最好自己试一下)
//ManfredHu
//Arguments[2]   0: "我是参数1"  1: "我是参数2"

bind

this

var obj = {};
function foo() {
return this;
}
var foo2 = foo.bind(obj); //复制函数绑定上下文
var obj2 = {};
obj2.foo2 = foo2;

console.log(obj === foo2());        //-->true
console.log(obj === window.foo2()); //-->true
console.log(obj === obj2.foo2());   //-->true

window

obj2

var context = { foo: "bar" };

function returnFoo () { //返回this.foo的简单函数
return this.foo;
}

returnFoo(); //-->undefined（因为window.foo不存在）

var bound = returnFoo.bind(context); //用bind绑定函数上下文

bound(); //-->"bar"（因为上面被绑定了上下文了，这里输出context.foo）

returnFoo.call(context);  //--> bar（call的基本用法）

returnFoo.apply(context); //--> bar

context.returnFoo = returnFoo; //将函数引用赋给context对象

context.returnFoo(); //--> bar（returnFoo函数里面的this是context）

//-----------------------------------------------------------------------
// 上面的应该都不会很难，下面是比较实用的部分，每一句都要看得懂之后才往下看
//-----------------------------------------------------------------------

[1,2,3].slice(0,1);  //-->[1]（简单的分割数组，比较麻烦是不是）

var slice = Array.prototype.slice; //更简单的做法，将原型上的slice方法缓存到本地，方便快捷调用

//因为没有绑定上下文，slice也不知道去截取哪个数组
slice(0, 1); //--> TypeError: can't convert undefined to object

//同上，还是因为没有绑定上下文，slice也不知道去截取哪个数组
slice([1,2,3], 0, 1); //--> TypeError: ...

//绑定了上下文，跟上面的[1,2,3].slice(0,1);一样，但是slice方法被封装起来了
slice.call([1,2,3], 0, 1); //--> [1]

//跟上面差不多，只是换成了apply方法的调用，参数变成了数组的形式
slice.apply([1,2,3], [0,1]); //--> [1]

//精髓的一句，上面的演进只是为了解释这一句而已，整个的思想就是“封装”，方便调用
//就是将slice.call这句简写成slice一句就完成了
//我们上面其实用的很多都是函数绑定对象，但是却忘记了其实JS函数也是对象，也可以被绑定
//这里将slice当作对象，用call去绑定它，返回一个绑定了的函数，方便后面复用，也就是缓存的作用
slice = Function.prototype.call.bind(Array.prototype.slice);

//跟上面的slice.call([1,2,3], 0, 1);对比一下发现原来把call封装到slice里面去了
slice([1,2,3], 0, 1); //--> [1]

//上面一句看懂了这句就很好懂了，bind.call省略为bind的意思
var bind = Function.prototype.call.bind(Function.prototype.bind);

//OK，经过我们的处理，slice和bind的功能都很厉害了

//回到最初的例子
var context = { foo: "bar" };
function returnFoo () {
return this.foo;
}

//现在来使用神奇的"bind"函数
//bind(function,context)
//@function 待绑定上下文的函数
//@context  绑定的上下文
//@return   返回一个绑定了上下文的函数
//按照以前的书写顺序是这样的:returnFoo.bind(context,[args1,args2……])
//书写顺序完全改变了有木有？封装起来了有木有？
var amazing = bind(returnFoo, context);
amazing(); // --> bar

4. 总结

5. 引用参考：