javascript的object和function的基础知识

随手记录一些javascript的一些基础知识，之前只是简单用到javascript，并没有了解其中的概念。

1.  Javascript Object:

In JavaScript, almost "everything" is an object.

• Booleans can be objects (if defined with the new keyword)
• Numbers can be objects (if defined with the new keyword)
• Strings can be objects (if defined with the new keyword)
• Dates are always objects
• Maths are always objects
• Regular expressions are always objects
• Arrays are always objects
• Functions are always objects
• Objects are always objects

All JavaScript values, except primitives, are objects.

1.1 Object Methods

Methods are actions that can be performed on objects.

Object properties can be both primitive values, other objects, and functions.

An object method is an object property containing a function definition.

Property	Value
firstName	John
lastName	Doe
age	50
eyeColor	blue
fullName	function() {return this.firstName + " " + this.lastName;}

 

JavaScript objects are containers for named values, called properties and methods. 

 

1.2 创建object的方式：常用的create object有两种方式：

a) with new keyword

const person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";

 

b) Using an Object Literal

const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

 

1.3 JavaScript Object Methods

JavaScript methods are actions that can be performed on objects. 注意这里的用词是method，而不是function。

A JavaScript method is a property containing a function definition.

Property	Value
firstName	John
lastName	Doe
age	50
eyeColor	blue
fullName	function() {return this.firstName + " " + this.lastName;}

 

可以用系统的build-in method: 例如：

let message = "Hello world!";
let x = message.toUpperCase();

 

1.4  Object Constructors

function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

Sometimes we need a "blueprint" for creating many objects of the same "type".

The way to create an "object type", is to use an object constructor function.

In the example above, function Person() is an object constructor function.

Objects of the same type are created by calling the constructor function with the new keyword:

const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");

我的理解：object constructors其实就是function，用typeof打印出来也是function。

A function defined as the property of an object, is called a method to the object.
A function designed to create new objects, is called an object constructor.

 

1.5  Object Prototypes

对于上面的Persion这个constructor function，you can not add a new property to an existing object constructor，例如这样是错误的：Person.nationality = "English";

但你可以在实例化的object中添加一个property，如果你需要对这个模版的函数统一增加一个属性，可以用prototypes：

All JavaScript objects inherit properties and methods from a prototype:

• Date objects inherit from Date.prototype
• Array objects inherit from Array.prototype
• Person objects inherit from Person.prototype

The Object.prototype is on the top of the prototype inheritance chain:

Date objects, Array objects, and Person objects inherit from Object.prototype.

The JavaScript prototype property allows you to add new properties to object constructors:

 对于Person来说，可以这样：Person.prototype.nationality = "English";

 

2.  Javascript Function

2.1  function的定义比较简单，掠过。参见：https://www.w3schools.com/js/js_function_definition.asp ，其中注意Arrow Functions，和Java中的语法基本一样。另外function也是Objects。

2.2 function的执行，比较常见，掠过。

Self-Invoking Functions的用法如下，这种写法有几个好处，尤其是对于ES6之前的用法，具体参见：https://developer.mozilla.org/en-US/docs/Glossary/IIFE 

(function () {
  let x = "Hello!!";  // I will invoke myself
})();

2.3 call(), apply() 方法：
     参见：https://www.w3schools.com/js/js_function_call.asp

2.4 bind()方法：

     With the bind() method, an object can borrow a method from another object. 参见 https://www.w3schools.com/js/js_function_bind.asp ，但我的理解和这里描述的不同，我的理解是method把自己的instance bind到bind中的参数了，其中的例子中的member并没有新增fullName method.

 

TODO： 还有一个大点是JS中this的用法，这个很灵活，也很重要，参见：https://www.w3schools.com/js/js_this.asp ，有机会我再写下我的体会。

 

 另外，我还有一个程序我之前总是搞混，记录下：

//第一种写法用了：Self-Invoking Functions
// 同时注意incrementCounter可以访问counter变量
var testModule = (function () {
  var counter = 0;
  return {
    incrementCounter: function () {
      return ++counter;
    },
    resetCounter: function () {
      console.log( "counter value prior to reset: " + counter );
      counter = 0;
    }
  };
})();

console.log("testModule type:"+typeof(testModule));
// Increment our counter
testModule.incrementCounter();
testModule.resetCounter();

// 第二种写法，注意第一种写法的在function外加一个()并加上();结尾的写法。
// 如果没有这个写法，直接用testModule2.incrementCounter()会报错，因为testModule2是一个function
var testModule2 = function () {
  var counter = 0;
  return {
    incrementCounter: function () {
      return ++counter;
    },
    resetCounter: function () {
      console.log( "counter value prior to reset: " + counter );
      counter = 0;
    }
  };
};

var testModule2_ins = testModule2();
console.log("testModule2 type:"+typeof(testModule2));
console.log("testModule2() type:"+typeof(testModule2_ins));
testModule2_ins.incrementCounter();
testModule2_ins.resetCounter();

 上面的程序还用到了闭包closures的概念，参见js闭包篇。

example2：这种写法也很有代表性：https://jsfiddle.net/hotae160/ 

---

 参考：https://www.w3schools.com/js/js_object_constructors.asp

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects