this callee caller 克隆 三目运算符
1. this
- 函数预编译过程 this --> window
- 全局作用域中 this --> window
- call/apply可以在函数运行时改变this指向
- obj.func() func()里面的this指向obj 谁调用就指向谁
var name = "222";
var a = {
name : "111",
say : function () {
console.log(this.name);
}
};
var fun = a.say;
fun(); //222
a.say(); //111
var b = {
name : "333",
say : function (fun) {
fun();
}
};
b.say(a.say); //222
b.say = a.say;
b.say(); //333
var foo = 123;
function print() {
this.foo = 234;
console.log(foo); //234 这里打印的时window里面的foo,this指向window
}
print();
var foo = 123;
function print() {
this.foo = 234;
console.log(foo); //123 这里打印的时window里面的foo,this指向print,若要打印234应该console.log(print.foo);
}
new print();
2. arguments.callee
arguments 的主要用途是保存函数参数, 但这个对象还有一个名叫 callee 的属性,返回正被执行的 Function 对象,也就是所指定的 Function 对象的正文。
function test() {
console.log(arguments.callee == test); //ture
}
test();
这有利于匿名函数的递归或者保证函数的封装性。
例如在立即执行函数使用递归时,由于没有函数名,所以需要借用arguments.callee来充当函数名。
var num = (function(n) {
if(n == 1) {
return 1;
}
return n * arguments.callee(n - 1); //100!
}(100));
3. func.caller
caller返回一个函数的引用,这个函数调用了当前的函数; callee放回正在执行的函数本身的引用,它是arguments的一个属性。
function test () {
demo();
}
function demo () {
console.log(demo.caller); //f test () {...}
//test调用了demo函数,所以demo.caller返回test
}
callee是arguments对象的一个属性,指向 arguments 对象的函数,即当前函数。
caller是函数对象的一个属性,指向调用当前函数的函数体引用。
4. 克隆
4.1 浅层克隆
var obj = {
name : 'abc',
age : 123,
sex : 'female'
}
var obj1 = {};
function clone(origin, target) {
var target = target || {}; //提高容错
for(var prop in origin) {
target[prop] = origin[prop];
}
return target;
}
clone(obj, obj1);
上例中,克隆的对象都是基本类型,直接赋值就能实现克隆功能,且克隆后,target的值发生改变不会影响origin的值。
由于引用值的赋值,赋值的是地址,target和origin指向同一个内存,所以target改变,origin也会跟着改变。
4.2 深度克隆
var obj = {
name : 'abc',
age : 123,
card : ['visa', 'master'],
wife : {
name : 'bcd',
son : {
name : 'aaa'
}
}
};
var obj1 = {};
function deepClone(origin, target){
var target = target || {},
toStr = Object.prototype.toString,
arrStr = '[object Array]';
for(var prop in origin) {
if(origin.hasOwnProperty(prop)) {
if(origin[prop] !== 'null' && typeof(origin[prop]) == 'object') {
if(toStr.call(origin[prop]) == arrStr) {
target[prop] = [];
}else{
target[prop] = {};
}
deepClone(origin[prop], target[prop]);
}else{
target[prop] = origin[prop];
}
}
}
return target;
}
deepclone(obj, obj1);
- 遍历对象 for(var prop in obj)
- 判断是不是原始值 typeof() ‘object’
- 判断是数组还是对象 instanceof toString constructor
- 建立相应的数组或对象
- 递归
5. 三目运算符
三目运算符,也叫三元运算符。
基本语法:
expression ? santence1 : santence2;
条件判断expression是否为真,为真执行santence1,为假执行santence2,并返回值。
例如
var num = 1 > 0 ? 2 + 2 : 1 + 1; //num = 4;
三目运算符像是一个简化版的if语句,但是与if不同的是,三目运算符会return返回值。
var num = 1 > 0 ? ("10" > 9 ? 1 : 0) : 2;
上例先运算括号内的语句;
"10" > 9
是true,因此返回1;
这样就相当于var num = 1 > 0 ? 1 : 2;
,所以num为1。
但是需要注意的是,"10" > "9"
是false,字符串和数字比较大小会将字符串转化为数字再比较,而字符串和字符串之间的比较是逐位比较ascii码的大小。
运用三目运算符可以简化一些代码的编写,例如深度克隆中
var obj = {
name : 'abc',
age : 123,
card : ['visa', 'master'],
wife : {
name : 'bcd',
son : {
name : 'aaa'
}
}
};
var obj1 = {};
function deepClone(origin, target){
var target = target || {},
toStr = Object.prototype.toString,
arrStr = '[object Array]';
for(var prop in origin) {
if(origin.hasOwnProperty(prop)) {
if(origin[prop] !== 'null' && typeof(origin[prop]) == 'object') {
// if(toStr.call(origin[prop]) == arrStr) {
// target[prop] = [];
// }else{
// target[prop] = {};
// }
target[prop] = (toStr.call(origin[prop]) == arrStr) ? [] : {};//这里可以使用三目运算符代替上面的if...else
deepClone(origin[prop], target[prop]);
}else{
target[prop] = origin[prop];
}
}
}
return target;
}
deepclone(obj, obj1);