JS study notes - - day05

this points to

this points to the object:
1. When called as a normal function, this points to the window object
2. When called as an attribute of an object, whoever calls this points to whoever
3. In the constructor, this points to the object created by the constructor

Change the method pointed to by this

1.call method
function.call(argument1, argument2...)
Parameter 1 indicates that this in the function points to parameter 1
Starting from parameter 2, it is the actual parameter passed to the function

2.apply method
function.apply(parameter1, parameter2)
Parameter 1 indicates that this in the function points to parameter 1
Starting from parameter 2, it is an array passed to the function, and the elements in the array are the actual parameters passed to the function
(Only two parameters, the second parameter must be an array)

Application: Find the maximum value in the array Math.max.apply( any value, arr)

3.bind method
function.bind(argument1, argument2...)
Parameter 1 indicates that this in the function points to parameter 1
Starting from parameter 2, it is the actual parameter passed to the function
Note: The returned function body should be used, function.bind(parameter 1, parameter 2...)()

the difference:
The difference between the call and bind methods: the cal1 method directly calls the function, and the function body returned by the bind method needs to be called manually
The difference between the call and apply methods: the method of passing actual parameters is different, the cal1 method passes parameters in turn, and the apply method passes parameters through an array

Five ways to create objects

1. Literal quantity { }

<script>
	var obj = {};
</script>

2. Factory mode to create objects
1. Create a method
2. Create an empty object inside the method
3. Manually return the object
4. Call method

 <script>
 function createObj(name, age, sex) {

            // Create an empty object manually
            var obj = {};
            obj.myname = name;
            obj.myage = age;
            obj.sex = sex;
            obj.say = function () {
                console.log("666666");
            }
            return obj; //return object manually
        }

        var p1 = createObj("111", 18, "male");
        var p2 = createObj("2222", 10, "male");

        console.log(p1);
        console.log(p2);
</script>

3. Constructor creation
3.1 Use the new keyword to call the function: new function name (), this function is called the constructor
3.2 The constructor is also a function, the first letter of the constructor is generally capitalized to distinguish it from ordinary functions
3.3 What does the new keyword do:
a. Create an instantiated object with the same name as the function
b.this points to the instantiated object
c. Execute the code (add properties and methods to the instantiated object through this)
d. Return this implicitly
3.4 this in the constructor points to the instantiated object

<script src="">
        function Person(name, age, sex) {
            console.log(this, 1111);
            this.myname = name;
            this.myage = age;
            this.sex = sex;
            var myname = "hello";
            console.log(this, 2222);
        }
        var p1 = new Person("HELLO", 18, "666");
        console.log(p1);
    </script>

4. new creation, built-in constructor (Array, Object, Date, String, Number, Boolean)
struct: new Array()...

5.Object.create() method creation
Parameters can only be null and objects, otherwise an error will be reported
Used to create a new object, the parameter is the prototype of this object

prototype

1. Everything is an object

2. Prototype (prototype object): Inheriting the properties of the object in js, there is a [[Prototype]] internal property, and the object corresponding to [[Prototype]] is called the prototype

3.[[Prototype]] is an internal attribute, we cannot directly access this attribute, firefox and chrome browsers provide a __proto__ attribute to access the prototype of the object
4.
a. Each object has a __proto__ attribute, and the value of the attribute value is an ordinary object
b. Each function object has a prototype attribute, and the value of the attribute value is an ordinary object
c. There is a constructor attribute on the prototype object, and the attribute value points to the constructor of the instantiated object

5. The role of the prototype:
5.1. Resource sharing, saving memory space
5.2 Implementing inheritance

6. Attributes that do not exist by themselves, look up through __proto__

The relationship between constructors, instantiated objects, and prototype objects

Instantiate an object. The attribute value of _ proto_ is an object (prototype object)
The property value of the function object.prototype property is an object (prototype object)
Prototype object.constructor = instantiate the constructor of the object
As shown in the picture:

prototype chain

Every object inherits properties from the prototype until null terminated.
All constructors have a prototype inherited from Object.prototype, the prototype chain:

<script src="">
        function Animal(name, age) {
            this.name = name;
            this.age = age;
            this.sing = function () {
                console.log(this.name + "  is sing");
            }
        }
        Animal.prototype.say = function () {
            console.log("in the constructor Animal Added a say method");
        }
        Object.prototype.jump = function () {
            console.log("in the constructor Object Added a say method");
        }
        var cat = new Animal('cat', 2);
        //{name,age,sing}
        console.log(cat.jump());
        console.log(cat.__proto__ == Animal.prototype);

        // Animal.prototype == new Object()
        console.log(Animal.prototype.__proto__ == Object.prototype); //{}.__proto__

        console.log(Object.prototype);

        console.log(Object.prototype.__proto__); //null
    </script>

Tags: Javascript Front-end

Posted by ricroma on Wed, 28 Dec 2022 04:07:01 +0300