Reading Notes of "JavaScript Object-Oriented Programming Guide (2nd Edition)" (1)

Posted by dizel247 on Sun, 07 Jul 2019 00:25:32 +0200

Catalog

I. Objects
  1.1 Ways to Get Attribute Values
  1.2 Get the value of dynamically generated attributes
 Array
  2.1 Check whether it is an array
  2.2 Increasing array length results in undefined unassigned locations
  2.3 Implementing Simple Iterator with Closure
 Scope
  3.1 Function Scope (Local Variables)
  3.2 There is no block-level scope
  3.3 Variable Leakage
  3.4 Variable Increase
  3.5 Temporary Scope
 IV. Closure
  4.1 Values in Operational Closures
 V. Event monitoring
 Type Detection
 Type Conversion
 8. URL Coding
  8.1 Coding
  8.2 Decoding
 9. JSON format
  9.1 to JSON format
  9.2 to Object
 10. Compatibility

I. Objects

1.1 Ways to Get Attribute Values

water = {
  down: false
}
console.log(water.down) // false
console.log(water['down']) // false

1.2 Get the value of dynamically generated attributes

var type = 'down'
console.log(water[type]) // false

Array

2.1 Check whether it is an array

typeof([1,2])  // object
Array.isArray([1,2])  // true
Object.prototype.toString.call([1,2])  // [object Array]
Array.isArray(Array.prototype)  // true
Object.prototype.toString.call(Array.prototype)  // [object Array]

2.2 Increasing array length results in undefined unassigned locations

Reducing the length of the array eliminates redundant values.

var x = [1,2];
x.length = 7;
console.log(x);  // [1, 2, undefined × 5]
x.length = 1;
console.log(x);  // [1]

2.3 Implementing Simple Iterator with Closure

var next = setup([3,3,9]);
function setup(x){
  var i = 0;
  return function(){
    console.log(x[i++]);
  }
}
next();  // 3
next();  // 3
next();  // 9
next();  // undefined

Scope

3.1 Function Scope (Local Variables)

It is not possible to access variables directly outside the function.

function water() {
 var direction = 'down'
}
console.log(direction)  // Uncaught ReferenceError: direction is not defined

3.2 There is no block-level scope

Variables in code blocks such as for and if are not local variables.

if(water){
  var down = true
}
console.log(down)  // true

3.3 Variable Leakage

Variables in the body of a function are not declared and can be leaked into global variables when the function is first executed.

function water() {
  direction = 'down'
}
water()  // Execution function
console.log(direction)  // down

3.4 Variable Increase

The declared variable name will be raised to the top and the value will not be raised.

var down = true
function water() {
  // Variable elevation covers external down, and because the value is not elevated, it is undefined.
  console.log(down)  // undefined
  var down = false  // false
  console.log(down)
}
water()

3.5 Temporary Scope

call and apply borrow another object's method to improve code reuse
 The first parameter is the direction of this, the second parameter is the incoming parameter, and apply is the incoming array.
The constructor will point to window without using the value of new this

IV. Closure

4.1 Values in Operational Closures

var nature = (function() {
  var water = {}
  water.down = false
  water.get = function(type) {
    return water[type]
  }
  water.set = function(type,val) {
    water[type] = val
    return typeof(val) === 'boolean' ? true : false
  }
  return {
    getWater: water.get,
    setWater: water.set
  }
})()
console.log(nature.getWater('down'))  // false
console.log(nature.setWater('down',true))  // true

V. Event monitoring

var event = {
  add: function ( dom,type,func ) {
    if(window.addEventListener){
      dom.addEventListener( type,func,false )
    }
    // Compatible with IE9 below
    else if(document.attachEvent) {
      dom.attachEvent('on' + type,func)
    }
    else {
      dom['on' + type] = func
    }
  },
  del: function ( dom,type,func ) {
    if(window.addEventListener){
      dom.removeEventListener( type,func,false )
    }
    else if(document.attachEvent) {
      dom.detachEvent('on' + type,func)
    }
    else {
      dom['on' + type] = null
    }
  }
}
var f = function(){
  console.log('event received')
}
event.add(document.body,'click',f)
event.del(document.body,'click',f)

Type Detection

6.1 Common Types

typeof(1)  // "number"

number/boolean/string/undefined/object/function

6.2 Inheritance Detection

function Water (name,status) {
  this.name = name
  this.status = status
}
var seaWater = new Water('sea','warm')
seaWater instanceof Water  // true

6.3 NaN and isFinite detection

NaN is not equal to NaN. The isNaN function is needed for detection.

NaN === NaN  // false
isNaN(NaN)  // true

Type Conversion

7.1 to plastic

parseInt and parseFloat terminate when they encounter the first exception character.

console.log(parseInt(66.5t))  // 66.5
console.log(parseInt(t66.5t))  // NaN

7.2 null and undefined

Values beyond the range show Infinity.

console.log(1*undefined)  // NaN
console.log(1*null)  // 0

8. URL Coding

8.1 Coding

var src = "http://www.cnblogs.com/bergwhite/p/6657943.html"
var srcURI = encodeURI(src)  // "http://www.cnblogs.com/bergwhite/p/6657943.html"
var srcURICom = encodeURIComponent(src)  // "http%3A%2F%2Fwww.cnblogs.com%2Fbergwhite%2Fp%2F6657943.html" 

8.2 Decoding

decodeURI(srcURI)  // "http://www.cnblogs.com/bergwhite/p/6657943.html"
decodeURIComponent(srcURI)  // "http://www.cnblogs.com/bergwhite/p/6657943.html"

9. JSON format

9.1 to JSON format

var water = {
  down: false
}
var waterJSON = JSON.stringify(water)  // "{"down":false}"

9.2 to Object

JSON.parse(waterJSON)  // Object {down: false}

10. Compatibility

parseInt(09) // In ES5, the default is not to convert octal, while in ES3, the default is octal.
parseInt(09,10)  // When the value is a date, it is processed as decimal

Thank you for your reading.

Topics: Javascript JSON Attribute