Table of contents
[Chapter 2] Advanced functions
| (Review) Function Declarations
| The this of the function points to
| Change the pointer of the function this
[Chapter 2] Advanced functions
| (Review) Function Declarations
| functions are also objects
Methods in Java don't seem to be objects! just a method of the object
Functions are objects, and functions also have a prototype object of Function. All function f object instances also have access to their prototype object.
| The this of the function points to
| Change the pointer of the function this
Method 1: call()
Method 2: apply()
Method 3: bind()
Summary of the three
| "strict mode" for functions
More strict mode requirements reference: Strict Mode - JavaScript | MDN
| closure
What is a closure
-
A closure is a function: the function where the variable is located is the closure (function)
-
It can also be said that if the scope of any function can access local variables inside other functions, a closure phenomenon occurs
The role of the closure: outside the f scope, access the local variables in the f scope
In JS, a method (function) is an object, so it can return
code example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function fn(){
var num = 10;
function fun(){
console.log(num);
}
return fun;
}
var newf = fn();//获得返回的fun函数,相当于把fun拿出来了,这样就可以在 fn的作用域外,使用到了其作用域内的局部变量num啦
newf(); //10 相当于把【 fn(); → fn调用了fun();】 直接整合为了 【newf();】
</script>
</head>
<body>
</body>
</html>
| Shallow copy and deep copy
shallow copy
-
Shallow copy refers to: assignment between different objects, if it is a basic data type, it can be assigned to a new object completely and independently , but for the object type within the object, only the address can be assigned to the new object
-
shallow copy example
Shallow copy syntax (syntactic sugar, that is, a built-in function encapsulation of the above-mentioned for loop traversal assignment of JS)
Object.assign(Ctrl+V的对象, Ctrl+C的对象);
deep copy
-
Principle: use the recursive function to assign the object in the object to the new object with the for loop
-
There is no syntactic sugar for deep copy, we need to write the function ourselves!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//old obj
var obj = {
name: 'Klee',
age: 10,
features: {
color: 'red',
hobby: 'fishing'
}
}
//new obj
var newObj = {}
//deepcopy
function deepCopy(newObj , oldObj){
for(var k in oldObj){
//获取属性值
var item = oldObj[k];
//判断是否是对象,若是,则递归调用deepcopy
if(item instanceof Array){
//新对象的第k个属性是数组 newObj[k]代表对象nowObj的第k个索引的对象(复习for(in)语法)
newObj[k] = [];
deepCopy(newObj[k],item);//递归给数组赋值
}
//判断是否是数组,若是,则递归调用deepcopy
else if(item instanceof Object){
newObj[k] = {};
deepCopy(newObj[k],item);
}
//其他情况,则说明该属性是基本数据类型
else{
newObj[k] = item;
}
}
}
//测试
console.log('最开始的obj');
console.log(obj.features.hobby);
deepCopy(newObj , obj);
console.log('调用了deepcopy后的obj、newObj');
console.log(obj.features.hobby);
console.log(newObj.features.hobby);
newObj.features.hobby = 'eating';
console.log('修改了newObj中对象的属性后的obj、newObj');
console.log(obj.features.hobby);
console.log(newObj.features.hobby);
</script>
</head>
<body>
</body>
</html>