Common and constructor functions in JavaScript

Source: Internet
Author: User

Common and constructor functions in JavaScript
What is a constructor? What is the difference between a constructor and a common function? What did I do when I use the new keyword? What if the constructor has a return value? Can constructors be called as common functions? Here are some of my understandings. If you have any mistakes, please correct them. Thank you! This always points to the owner of the function or method being executed. For example: function test () {console. log (this) ;}test (); // Window {top: Window, window: Window, location: Location, external: Object, chrome: Object ...} In the above Code, we define a test () function on the page and call it on the page. When a function is defined globally, its owner is the current page, that is, the window object. This points to several situations 1. this. name // this indicates the window object 2. the function calls test (); // this in the test () function also points to the window object 3. object method call obj1.fn (); // this in the fn () method of the obj1 object points to obj14. call the constructor var dog = new Dog (); // this In the constructor points to the newly created instance object, that is, the dogcall and apply call functions the same as apply, but the method for accepting parameters is different, call accepts multiple single parameters, and apply accepts parameter arrays. The functions of call and apply can be simply described as: when an object instance lacks a function/method, it can call a ready-made function/method of other objects, the method is to change the context of the function runtime by replacing this with the object instance. For example: function Dog () {this. sound = "Wang Wangwang";} Dog. prototype. bark = function () {alert (this. sound);} Now I have another cat object: var cat = {sound: 'Too many meak'}. I also want this cat object to call the bark method, at this time, you do not need to define the bark Method for it again. You can call/apply to call the bark method of the Dog class: Dog. prototype. bark. call (cat); or: dog. bark. call (cat); add something to turn it into a chestnut with parameters: function Dog () {this. sound = "Wang Wangwang";} Dog. prototype. bark = function (words) {alert (this. sound + "" + words);} var dog = new Dog (); dog. bark ("thieves"); // ale Rt: Wang Wangwang has a thief Dog. prototype. bark. call (cat, "ELE. Me"); // alert: normal function: function fn () {alert ("hello sheila ");} fn (); // alert: Compared with the constructor, the normal hello sheila function has four obvious features: 1. you do not need to use the new keyword to call fn (); 2. return function fn (a, B) {return a + B;} alert (fn (2, 3); // alert: 53. we do not recommend using the this keyword inside the function. We do not recommend using this keyword. Of course, it is okay to use this keyword, but pay attention to what happened at this time. If you use the this keyword inside a common function to define a variable or function, because this points to the window global object, some global variables or functions are inadvertently added to the window. Function greeting () {this. name = "sheila"; alert ("hello" + this. name);} greeting (); // alert: hello sheila alert (window. name); // alert: sheila4. the name of the function is in hump mode. The lower-case constructor is in JavaScript and the new keyword is used to call the defined constructor. By default, a new object is returned, which has the variables and functions/methods defined by the constructor. For example, function Prince (name, age) {this. gender = "male"; this. kind = true; this. rich = true; this. name = name; this. age = age;} Prince. prototype. toFrog = function () {console. log ("Prince" + this. name + "turned into a frog. ");} var prince = new Prince (" charming ", 25); prince. toFrog (); // Prince charming turned into a frog. prince. kind; // true compared with normal functions, constructor has the following obvious features: 1. use the new Keyword to call var prince = new Prince ("charming", 25); 2. you can use this The keyword is inside the constructor. this points to the newly constructed object. The variables or functions/methods defined by this are instance variables or Instance functions/methods. You must use an instance to access the instance. You cannot use a type name to access the instance. Prince. age; // 25 Prince. age; // undefined3. by default, the constructor does not need to use the return explicit return value. By default, this is returned, that is, the new instance object. Of course, you can also use the return statement. The return value varies according to the type of the return value. The details are described below. 4. We recommend that you use uppercase letters for function naming. It is not in the naming convention, but it is recommended to write it like this. What happens when the new keyword is used for instantiation? The Prince () function in the preceding section provides an example: 1. Create an empty object in step 1. Var prince = {} 2. Step 2: Point this in the constructor Prince () to the newly created object prince. 3. Step 3: point the _ proto _ attribute of prince to the prototype of the Prince function, and create the relationship between the object and the prototype. Step 4: Execute the code in the constructor Prince. What if the constructor has a return value? When no return is explicitly called in the constructor, this object is returned by default, that is, the newly created instance object. When return is called in the constructor, there are two cases: 1. return is a simple data type of five types: String, Number, Boolean, Null, Undefined. In this case, ignore the return value and still return this object. 2. The return Object does not return this Object, but returns the return value of the return Statement. Function Person (name) {this. name = name; return {name: "cherry"} var person = new Person ("sheila"); person. name; // cherry person; // Object {name: "cherry "}

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.