Web Front-end
JS Tutorial
Comparison of ordinary functions and constructors in JavaScript_javascript skills
Comparison of ordinary functions and constructors in JavaScript_javascript skills
Question
What is a constructor?
What is the difference between a constructor and a normal function?
What exactly did you do when you used the new keyword?
What should I do if the constructor has a return value?
Can the constructor be called as a normal function?
The following are some of my understandings. Please correct me if I have misunderstandings. Thank you!
this
this always points to the owner of the function or method currently 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 in the page and then call it in the page. When a function is defined globally, its owner is the current page, which is the window object.
Several situations this points to
1. Call globally
this.name //this points to the window object
2. Function call
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 obj1
4. Call the constructor
var dog=new Dog();//this in the constructor points to the newly created instance object, which is the dogcall and apply
The functions of call and apply are the same, but the way of accepting parameters is different. Call accepts multiple single parameters, while apply accepts an array of parameters.
The role of call and apply can simply be said that when an object instance lacks a function/method, it can call the ready-made functions/methods of other objects by replacing this with this object instance and changing the function runtime. context.
For example:
function Dog(){
this.sound="汪汪汪";
}
Dog.prototype.bark=function(){
alert(this.sound);
}Now I have another cat object:
var cat={sound:'meow meow'}
I also want this cat object to be able to call the bark method. At this time, there is no need to redefine the bark method for it. You can use 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="汪汪汪";
}
Dog.prototype.bark=function(words){
alert(this.sound+" "+words);
}
var dog=new Dog();
dog.bark("有小偷");//alert:汪汪汪 有小偷
Dog.prototype.bark.call(cat,"饿了");//alert：喵喵喵 饿了Common functions
This is a simple ordinary function:
function fn(){
alert("hello sheila");
}
fn();//alert:hello sheilaOrdinary functions have four obvious characteristics compared with constructors:
1. No need to use the new keyword to call
fn();2. You can use the return statement to return the value
function fn(a,b){
return a+b;
}
alert(fn(2,3));//alert:53. It is not recommended to use the this keyword inside the function
We say that it is not recommended to use it, but of course it is possible to use it if you insist on it. You just need to pay attention to what happens at this time. If you use the this keyword to define a variable or function inside a normal function, because this points to the window global object at this time, some global variables or functions will be added to the window unintentionally.
function greeting(){
this.name="sheila";
alert("hello "+this.name);
}
greeting();//alert:hello sheila
alert(window.name);//alert:sheila4. Function names are in camel case, with the first letter in lowercase
Constructor
In JavaScript, use the new keyword to call the defined constructor. What is returned by default is a new object with the variables and functions/methods defined by the constructor.
Give me an 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与普通函数相比，构造函数有以下明显特点：
1.用new关键字调用
var prince=new Prince("charming",25);
2.函数内部可以使用this关键字
在构造函数内部，this指向的是构造出的新对象。用this定义的变量或函数/方法，就是实例变量或实例函数/方法。需要用实例才能访问到，不能用类型名访问。
prince.age;//25
Prince.age;//undefined
3.默认不用return返回值
构造函数是不需要用return显式返回值的，默认会返回this，也就是新的实例对象。当然，也可以用return语句，返回值会根据return值的类型而有所不同，细节将在下文介绍。
4.函数命名建议首字母大写，与普通函数区分开。
不是命名规范中的，但是建议这么写。
使用new关键字实例化的时候发生了什么？
以上文中的Prince()函数举个栗子：
1.第一步，创建一个空对象。
var prince={}
2.第二步，将构造函数Prince()中的this指向新创建的对象prince。
3.第三步，将prince的_proto_属性指向Prince函数的prototype，创建对象和原型间关系
4.第四步，执行构造函数Prince()内的代码。
构造函数有return值怎么办？
构造函数里没有显式调用return时，默认是返回this对象，也就是新创建的实例对象。
当构造函数里调用return时，分两种情况：
1.return的是五种简单数据类型：String，Number，Boolean，Null，Undefined。
这种情况下，忽视return值，依然返回this对象。
2.return的是Object
这种情况下，不再返回this对象，而是返回return语句的返回值。
function Person(name){
this.name=name;
return {name:"cherry"}
}
var person=new Person("sheila");
person.name;//cherry
p;//Object {name: "cherry"}
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1384
52
What is the difference between arrow functions and ordinary functions in es6
Mar 08, 2022 pm 12:11 PM
Differences: 1. The definition of the arrow function is much simpler, clearer and faster than the definition of the ordinary function; 2. The arrow function does not create its own this, but the ordinary function does; 3. The arrow function cannot be used as a constructor, while the arrow function cannot be used as a constructor. Functions can be used as constructors; 4. Arrow functions do not have their own arguments, but arrow functions do.
Constructor in Python
Sep 02, 2023 pm 04:29 PM
In Python, every class has a constructor, which is a special method specified inside the class. The constructor/initializer will be called automatically when a new object is created for the class. When an object is initialized, the constructor assigns values to data members in the class. There is no need to define the constructor explicitly. But in order to create a constructor, we need to follow the following rules - For a class, it is allowed to have only one constructor. The constructor name must be __init__. Constructors must be defined using instance properties (just specify the self keyword as the first argument). It cannot return any value except None. Syntax classA():def__init__(self):pass Example Consider the following example and
C++ syntax error: The same constructor signature appears multiple times, how to solve it?
Aug 22, 2023 pm 04:49 PM
C++ is a powerful programming language, but it is inevitable to encounter various problems during use. Among them, the same constructor signature appearing multiple times is a common syntax error. This article explains the causes and solutions to this error. 1. Cause of the error In C++, the constructor is used to initialize the data members of the object when creating the object. However, if the same constructor signature is defined in the same class (that is, the parameter types and order are the same), the compiler cannot determine which constructor to call, causing a compilation error. For example,
C++ syntax error: The constructor defined outside the class must be added with the class name as a qualifier. How should it be corrected?
Aug 22, 2023 pm 02:00 PM
C++ is a widely used object-oriented programming language. When defining the constructor of a class in C++, if you want to place the definition of the constructor outside the class, you need to add the class name as a qualifier to the definition of the constructor. To specify which class this constructor belongs to. This is a basic rule of C++ syntax. If this rule is not followed when defining the constructor of a class, a compilation error will appear, prompting "Constructors defined outside the class must be qualified with the class name." So, if you encounter this kind of compilation error, you should
Does go language have constructors?
Jan 10, 2023 pm 02:15 PM
Go language does not have constructors. Go language, as a structured language, does not have constructors in object-oriented languages. However, similar effects of constructors in object-oriented languages can be achieved in some ways, that is, using the process of structure initialization to simulate the implementation of constructors.
What is a constructor? Detailed explanation of constructors in JavaScript
Aug 04, 2022 pm 03:22 PM
As the basis of prototypes and prototype chains, first understanding the constructor and its execution process can better help us learn the knowledge of prototypes and prototype chains. This article will take you to learn more about the constructor in JavaScript and introduce how to use the constructor to create a js object. I hope it will be helpful to you!
The difference between arrow functions and ordinary functions
Sep 13, 2023 am 09:32 AM
The main differences between arrow functions and ordinary functions are syntax simplicity, different this points, not applicable to constructors, no arguments objects, etc. Detailed introduction: 1. Syntax simplicity. The syntax of arrow functions is more concise than that of ordinary functions. Arrow functions can be defined using arrows. The function keyword and curly braces are omitted, and the parameters and return values of the function can be directly defined. The arrow function is When there is only one parameter, the parentheses can also be omitted; 2. This points to different points, etc.
C++ error: The constructor must be declared in the public area, how to deal with it?
Aug 21, 2023 pm 08:26 PM
In C++ programming, the constructor is an important function used to initialize the member variables of a class. It is automatically called when an object is created to ensure proper initialization of the object. The constructor must be declared in the class, but sometimes you will encounter the error message "The constructor must be declared in the public area." This error is usually caused by incorrect access modifiers on the constructor. In C++, class member variables and member functions have an access modifier, including public, private, and protected.
