Object-Oriented 2

1. Empty Object

    var o = null; // 空对象, 存特点是只有变量 o 没有对象数据

Storage characteristics of value types and reference types

2. Memory logical Structure (drawing)
4. Assign value

    var num = 123; var num2 = num;

   • The storage feature of value type assignment, which copies all the data in a variable and stores it to a new variable.
   • var num = 123Indicates that the number stored in the variable is 123.
   • A copy of the data is then copied, which is 123 copies of one copy. Then there are 2 arrays in memory
   • Assign the copied data tonum2
   • It is characterized by having two copies of data in memory.
   • Exercise: var o = {name: ' Zhang San '};, var obj = o;
6. Assignment of reference type

    var o = { name: ‘张三‘ }; var obj = o;

   • Assignment is to copy the data stored in the variable o and assign the data to obj
   • There are 1 of data in memory
   • Issue: The Name property modified with obj affects the name in O

Deep copy and shallow copy

1. What is a deep copy, what is a shallow copy
   • If you copy a copy of all the reference structures of the data, the data is in memory independent of the deep copy
   • If the copy is made only for the properties of the current object, and the property is a reference type this is not considered, then the shallow copy
   • Copy: Copies a copy. Refers to copying object data.
   • When discussing the deep copy and the shallow copy, make sure that the object's properties are also reference types.
2. Encapsulation of code
   • Using object-oriented thinking, it is common for objects to have a copy of the method to complete their own copy
   • If you need to encapsulate an object into a shallow copy
   • This is inside a function (method) that represents the object that called the function (method).

Dynamic properties of objects

2. In JS, a grid object needs attributes that can be added in a 对象.属性名 = 值 way. As long as the assignment succeeds, the object adds properties.
4. Access forms for object properties
   • Point syntax:o.name
   • Associative arrays:o[ name ]
6. Ever used

   function mix( obj1, obj2 ) { for ( var k in obj2 ) { obj1[ k ] = obj2[ k ]; }}

8. When you need to add members dynamically to an object, you must use the syntax of the associative array

    // 利用关联数组的语法, 访问其 name 属性, 调用其 sayHello 方法 var o = { name: ‘张三‘, sayHello: function () { console.log( ‘你好, 我叫 ‘ + this.name ); } }; // console.log( o.name ); console.log( o[ ‘name‘ ] ); // o.sayHello(); o[ ‘sayHello‘ ]();

As parameter parameters

1. As a function parameter, it is a parameter that copies the data of the parameter to the definition of the function.

    function foo( num ) {} var a = 123; foo( a );

   • When a function is called, it first needs to copy the data in the parameter. That is, the number 123 copies one copy.
   • Jumps to the definition of the function (function body), and again completes the assignment of the parameter, that is, num = 123.
   • Formal entry function, ready to execute every word in the function.
2. A value type is a feature that is passed as a function parameter, and the function is two different variables outside the function, only the value is equal.
3. A reference type is a feature passed as a function parameter, and within a function is two different variables outside the function, but pointing to the same object.
   • Therefore, it is allowed to modify the data of objects outside the function inside the function

What is the function constructor of the constructor?

1. Initialization of the data
2. To add attributes to an object in JS, initialize the attribute value with

Procedures for creating objects

1. Code: var p = new Person(); .
2. First, operator new creates an object. It is similar to {} a ' no member ' object.
   • Using new to create an object, the type of the object is the name of the constructor that created it.
   • Using {} is, in any case, an Object type, equivalent new Object .
3. The constructor is then called to initialize the member
   • At the beginning of the call, the constructor has an assignment operation, which is this = the object that was just created.
   • So in the constructor this represents the object that was just created.
4. Add members to an object using the object's dynamic properties in the constructor.

Concept of Exception exception

An exception is an error that occurs during the execution of a program.

After the exception in JS, the browser will give an error code, is the error message. Error messages consist of error types and error messages

How to handle exceptions

is to be able to continue execution after an exception occurs. The most unusual feature of the exception is that once the code has an exception, the code is no longer executed.

Common exceptions are in two main categories:

1. Diversity of operating environments
2. Syntax error, code error

Try-catch syntax

That is, try to do this if error trapping errors occur

...try { 可能出现错误的代码} catch( e ) { 处理错误的代码}...

1. Code runs correctly, if an error occurs in a try, the code behind the wrong statement in the try is no longer executed and jumps directly into the catch
2. Handling error messages in Catch
3. Then proceed to the following code
4. If no error occurs in the try, then the following code is executed without a catch.

How to throw an exception

throw 对象

1. Throw is the syntax for throwing exceptions, followed by an object, the error message object
2. Typically this object new Error( ‘错误消息‘ ) is used to create. Arbitrary objects are also supported.

function showMessage ( msg ) { // 要显示一段文本, 所以我做一个限制 if ( typeof msg !== ‘string‘ ) { throw new Error( ‘传入的参数不是一个字符串‘ ); } // 是正常的 console.log( msg );}

Add

1. The final structure of the
2. try-catch syntax is try-catch-finally

      try { Code that may be wrong} catch (e) {execute} finally {end try this code block before execution, i.e. last execution}        

4. Hierarchy delivery

    function f1 () { f2(); // f1 称为调用者, 或调用函数, f2 称为被调用者, 或被调用函数 } function f2 () { f3(); } function f3() { throw new Error( ‘error‘ ); } f1();

Dom Operations Draw DOM Tree

<!doctype html><Html><head> < title> test </title> </head> <body> Span class= "hljs-comment" ><!--test--<div> Hello, I'm a  < span style= "Color:red" >div</span> label </< Span class= "Hljs-title" >div> </body> </HTML>           

The conclusion of any DOM tree structure

1. What is the operation of the so-called DOM operation?
2. General DOM tree structure

    父节点 兄弟节点 当前节点 属性节点 子节点 兄弟节点

Object-Oriented 2