JavaScript advanced programming (Third edition) study notes 6, chapter 7 _ javascript skills

This article mainly introduces the relevant information in Chapter 6 and Chapter 7 of the Study Notes for the advanced JavaScript programming (the third edition). For more information, see Chapter 2 Object-Oriented Programming

Object:

1. Data attributes

Optional retriable, which indicates whether the attribute can be deleted through delete to redefine the attribute, whether the attribute can be modified, or whether the attribute can be modified to the accessors attribute. The default value is true.

Enumerbale indicates whether the attribute can be accessed through for-in. The default value is true.

Whether to modify the property value. The default value is true.

„ Value, data storage location, undefined by default

Modify the default property attributes: Object. defineProperty (). Three parameters are received: the Object where the property is located, the property name, And the descriptor Object. The descriptor Object Attributes must be: retriable, enumerable, writable, and value.

Example:

var obj = {};Object.defineProperty(obj,”name”,{writable:true,value:”nihao”}); 

2. accessors

Retriable, which indicates whether the attribute can be deleted through delete to redefine the attribute, whether the attribute can be modified, or whether the attribute can be modified to the accessors attribute. The default value is true.

Enumerbale indicates whether the attribute can be accessed through for-in. The default value is true.

Get, called when reading properties, undefined by default

Set, called when writing properties, undefined by default

You must use Object. defineProperty ()

Example:

var obj = {_year:2004,edition:1}Object.defineProperty(book,”year”,{get:function(){return this._year;},set:function(newValue){if(newValue > 2004){this._year = newValue;this.edition += newValue – 2004;}}});book.year = 2005;alert(book.edition); //2 

Define multiple attributes: Object. defineProperties () receives two objects. One is to modify and add the properties, and the other one corresponds to the attributes to be modified or added to the first object. Supported browsers: IE9 +, FireFox4 +, Safari5 +, Opera12 +, chrome

Read attribute: Object. getOwnPropertyDescriptor () receives two parameters, the object where the attribute is located, the attribute name of the descriptor to be read, supported browsers: IE9 +, FireFox4 +, Safari5 +, Opera12 +, chrome

Creation object:

Factory model:

function createPerson(name,age){var o = new Object();o.name = name;o.age = age;o.sayName = function(){alert(this.name);};return o;}var person1 = createPerson(“g”,29); 

Constructor mode:

function Person(name,age){this.name = name;this.age = age;this.sayName() = function(){alert(this.name);};}var person = new Person(“g”,28); 

Differences between the two modes:

In constructor mode, you do not need to display the created object and assign a value to this without returning a statement.

The first letter of the constructor name must be in upper case. The new operator must be used to create a new instance.

Prototype

Each created function has a prototype attribute, which is a pointer pointing to an object, the purpose of this object is to include the attributes and methods that can be shared by all instances of a specific type. In other words, prototype is the prototype object of the object created through the function, the advantage is that all instances share the same attributes and methods.

IsPrototypeOf () is used to determine whether the prototype of an instance is the same as the current prototype.

Example:

Person. prototype. isPrototypeOf (person1); // true

Object. getPrototypeOf (), which can return the prototype of an instance. The supported browsers include IE9 +, Firefox3.5 +, Safari5 +, Opera12 +, and chrome.

Note: a search will be performed when you access the object property name. Search for the Instance Object first. If the instance object does not exist, search for the prototype object of the current object.

Note: If the attributes in the instance are the same as those in the prototype object, the properties of the prototype object will be blocked.

The hasOwnProperty () method can determine whether a property is from an instance. If the property is not from an instance, false is returned; otherwise, true is returned.

When you call delete on an instance, only the attribute names of the instance are deleted, and the properties of the prototype are not deleted.

Example:

Function Person () {} Person. prototype. name = "Nicolas"; Person. prototype. age = 29; Person. prototype. sayName = function () {alert (this. name);} var per1 = new Person (); var per2 = new Person (); per1.name = "Greg"; alert (per1.name ); // "Greg" from instance alert (per2.name); // "Nicolas" delete per1.name; alert (per1.name); // "Nicolas" from prototype delete per1.name; alert (per1.name ); // "Nicolas"

Note: The Object. getOwnPropertyDescriptor () method can only be used for instance attributes. To obtain the prototype attribute descriptor, you must directly call this method on the prototype Object.

In OPERATOR: returns true only when an attribute is in an instance object or a prototype object.

Example:

alert(“name” in Person); //truealert(“name” in per1); //true 

You can also use in and hasOwnProperty to determine whether the property exists in the prototype or in the instance.

Object. keys () method: receives an Object as a parameter and returns a string array composed of all enumerated attributes.

Object. getOwnPropertyNames () method: receives an Object and returns a string array composed of all attributes, whether or not it can be enumerated.

Simpler prototype syntax:

It is too troublesome to use the above method. More often, the following methods are used:

Person.prototype = {name : “Nicholas”,age : 29sayName = function(){alert(this.name);}} 

However, this method overwrites the entire prototype Object, which will cause the constructor attribute to point to the Object instead of the Person attribute. Although instanceof will still return the correct result, however, the constructor cannot determine the object type.

var per = new Person();alert(per instanceof Object); //truealert(per instanceof Person); //truealert(per constructor Object); //truealert(per constructor Person); //false 

If constructor is really important, you can set it as follows:

Person.prototype = {constructor:Person,name : “Nicholas”,age : 29sayName = function(){alert(this.name);}} 

The above Code sets the enumerable feature of constructor to true. By default, the native value is false. You can use Object. defineProperty () to set it in ECMAScript5-compatible browsers.

Object.defineProperty(Person.prototype,”constructor”,{enumerable:false,value:Person}); 

Note: rewriting the prototype object will cut off the connection between the existing prototype and any existing object instance.

Inheritance (difficult and requires further research)

Implement with prototype chain

To override the superclass method, the code for adding a method to the prototype should be placed after replacing the prototype,

Note: When the prototype chain is used for inheritance, you cannot use the object literal to create a prototype method. Otherwise, the prototype chain will be overwritten.

Borrow Constructor

Combination inheritance

Original Type inheritance, Object. creat (); receives two parameters: one is the Object prototype used as the new Object and (optional) the other is the Object that defines additional attributes for the new Object.

Example: Object. creat (person, {name: {value: "greg "}});

Parasitic inheritance

Parasitic combined inheritance

Chapter 2 function expressions

Creation method:

1. The function declaration can be upgraded by the function Declaration, that is, the statements using the function can be placed before the function declaration.

Function funName (arg0, arg1) {// function body}

2. function expressions cannot be upgraded, that is, they cannot be used before a function is created. In this case, the created function is called an anonymous function or a Lambda function.

Var funName = function (arg0, arg1) {// function body}

In strict mode, arguments. callee cannot be used to implement recursion. You can use the following method to implement recursion:

var factorial = (function f(num){if(num <= 1){return 1;}else{return num * f(num - 1);}}); 

Closure (difficult)

A closure is a function that has the right to access variables in another function scope. A closure is also a function.

A common way to create a closure is to create another function within a function.

A closure can only obtain the last value of any variable in an external function. The following example shows the problem

Example:

function createFuncrions(){var result = new Array();for(var i = 0;i < 10;i++){result[i] = function(){return i;}}return result;}var re = createFuncrions();alert(re[1](2)); 

Each function returns 10 instead of returning the corresponding index value as expected, because the createFuncrions function returns I = 10 at the end, in this case, each function references the same object that stores variable I, so I is 10 in each function. You can use the following method to force the closure to return the expected results:

function createFuncrions(){var result = new Array();for(var i = 0;i < 10;i++){result[i] = function(num){return function(){return num;};}(i);}return result;}var re = createFuncrions();alert(re[2]()); 

Each index returns its own index value.

Simulate block-level scope

Using anonymous functions can mimic block-level scopes:

(Function () {alert ("test"); // block-level scope. If no parentheses are used to wrap the function, an error will occur })();

The obvious disadvantage of using closures and private variables is that it will find another level in the scope chain, which affects the search speed to a certain extent.

The variables defined in the function can be called private variables to a certain extent. The function can simulate private variables and static private variables.

Enhancement module mode:

var singleton = function(){//private arg and private methodvar privateVariable = 10;function privateFunction(){return false;}//create objvar obj = new Object();obj.publicProperty = true;obj.publicFunction = function(){privateVariable ++;return privateFunction();};return obj;}();alert(typeof singleton);alert(singleton.publicProperty);alert(singleton.publicFunction());

The above content is a small Editor to introduce you to the JavaScript advanced programming (Third edition) study notes 6, 7 chapter, I hope to help you!