[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>

[Part VI | JavaScript Advanced] 2: Function Advanced