javascript原型链_原型javascript

javascript原型链

Correct way of adding functionality

正确的功能添加方式

Managing memory while writing code is one of the major qualities a developer can possess. Execution environment executes javascript code in two stages, i.e Creation and Hoisting.

在编写代码时管理内存是开发人员可以拥有的主要素质之一。 执行环境分两个阶段执行javascript代码，即Creation和Hoisting 。

执行上下文：创建和吊装 (Execution context: Creation and Hoisting)

Execution context creates a couple of things before actually executing the code. Firstly it creates a Global Object and the outer environment and then sets up memory space for variables and functions which is called Hoisting. Before the code is executed memory is allocated so that the variables exist in memory.Functions are written along with the code but that's not the case with variables instead a placeholder called as undefined is assigned to the variables and later in the execution phase where the code is executed line by line, the variables are assigned to their respective values. This helps in Dynamic typing or Coercion of javascript, wherein the type of variable is defined during the run time.So to summarize all variables are initialized with undefined but functions are allocated with memory and therefore can be called even before it is defined. In the case of variables, we will get an undefined value.

在实际执行代码之前，执行上下文会创建一些东西。 首先，它创建一个全局对象和外部环境，然后为变量和函数设置存储空间，这称为Hoisting 。 在执行代码之前，先分配内存，以便变量存在于内存中。函数与代码一起编写，但变量不是这种情况，而是将名为undefined的占位符分配给变量，并在执行阶段稍后将代码如果逐行执行，则将变量分配给它们各自的值。 这有助于JavaScript的Dynamic typing或Coercion ，其中变量的类型是在运行时定义的。因此，总而言之，所有变量都使用undefined初始化，但函数分配有内存，因此即使在定义变量之前也可以调用它们。 对于变量，我们将获得一个undefined值。

function person(firstname, lastname){
           return "Hello "+this.firstname+" "+this.lastname
      } 
}

In the above example, we have a function that takes in two arguments i.e. first and last name, and returns a greeting. Our javascript objects constitute of various functions like this, and these functions are allocated with memory during the hoisting phase of execution. Mind you, the more number of functions that are written in the object definition, the more memory is allocated to the object, and each time its instance is created.

在上面的示例中，我们有一个函数，该函数接受两个参数，即名字和姓氏，并返回问候语。 我们的javascript对象由各种类似的函数组成，并且在执行的提升阶段会为这些函数分配内存。 请注意，在对象定义中编写的功能越多，分配给对象的内存就越多，并且每次创建其实例时。

函数构造函数 (Function constructors)

Function constructors are normal functions that are used to construct objects. The this variable points a new empty object and that object is returned from the function automatically.Creating a function constructor for the Person object.

函数构造函数是用于构造对象的常规函数​​。 this变量指向一个新的空对象，并且该对象会自动从函数中返回。为Person对象创建一个函数构造函数。

function person(firstname, lastname){
    this.first = firstname;
    this.last = lastname;
}let employee1 = new person("John" , "Doe");
let employee2 = new person("Jane", "Doe");

Now that we extend the properties of the person object we can add new variables on the fly. for eg:

现在，我们扩展了person对象的属性，我们可以立即添加新变量。 例如：

employee1.designation = "Developer"
employee2.designation = "Tester"

原型制作 (Prototyping)

Prototyping an object is a method that can be used to add member functions to the object prototype which will make it available to all its extended objects but will save memory as the method is only available in the prototype and not copied to every object.This helps us to create base objects of sorts and extend their functionality without actually allocating the memory for functions.for eg:

对对象进行原型制作是一种方法，可用于向对象原型添加成员函数，这将使其对所有扩展对象可用，但由于该方法仅在原型中可用而不是复制到每个对象，因此将节省内存。我们可以创建各种基础对象并扩展其功能，而无需实际为函数分配内存。例如：

Person.prototype.getFullName = function(){
    return this.firstname+" "+this.lastname;
}
Person.prototype.greet = function(){
    return "Hello "+this.firstname+" "+this.lastname;
}

This above example will add two methods to the prototype available for the objects.

上面的示例将为对象提供两个原型方法。

Javascript leverages this functionality to provide various functions on inbuilt data structures and types. If we closely watch the object definition of an array we can see the functions that javascript provides

Javascript利用此功能为内置数据结构和类型提供各种功能。 如果我们仔细观察数组的对象定义，我们可以看到javascript提供的功能

In the object definition, we have proto which consists of various functions that a developer can use. When we define an array the functions are not allocated with memory, we can still use the methods.

在对象定义中，我们有一个原型 ，该原型包含开发人员可以使用的各种功能。 当我们定义一个数组时，函数没有分配内存，我们仍然可以使用这些方法。

内置函数构造函数 (Built-in function constructors)

We can have our own methods which can be added to the prototype of the built-in function constructor. for eg

我们可以拥有自己的方法，这些方法可以添加到内置函数构造函数的原型中。 例如

String.prototype.isLengthLessThan = function(boundary){
    return this.length < boundary;
}

The above method adds a function called isLengthLessThan() to the prototype of string.

上面的方法向字符串的原型添加了一个名为isLengthLessThan()的函数。

Various javascript frameworks such as JQuery leverages these functionalities in jQuery.fn.init to write code that allocates minimum memory and provides tons of functionality to users.

各种JavaScript框架(例如JQuery)利用jQuery.fn.init中的这些功能来编写分配最小内存并为用户提供大量功能的代码。

结论 (Conclusion)

Prototype objects is a way to go for creating objects with tons of functionalities with minimal memory allocation. There are a lot more things we can achieve using prototyping.

原型对象是创建具有大量功能且内存分配最少的对象的一种方法。 使用原型可以做很多事情。

翻译自: https://medium.com/@ashwanipandey1218/prototyping-javascript-e6ffbd6721a7

javascript原型链