JS Object Study Notes

---

foreword

In JS, strings, numbers, arrays, and functions are all objects. Each object contains several properties and methods.

---

1. Create an object

1. Create objects directly using { }

// JS 中的语句的结尾可以加分号(;)，也可以不加分号(;)，但是建议大家都加上分号
var a = {
    
    };     // JS 中的空对象，类似 Java 中的空的 Map
var b = {
    
    
}

var student = {
    
    
 // 使用 冒号(:) 分割 key 和 value
    name: '小曹',
    age: 18
};

console.log(a);
console.log(student);

function someMethod() {
    
    
    console.log("去外婆家");
}

var person = {
    
    
    name: '小红帽',
    age: 8,
    doing: someMethod,  // 把已经定义的函数作为 doing key 的 value
    say: function (target) {
    
        // 把匿名函数作为 say key 的 value
        console.log("你好, " + target);
    }
};

console.log(a);
console.log(student);
console.log(person);

//或者也可以这样写
//console.log(person.name);
//console.log(person['name']);
//person.say();
//person['say']();

• Dynamic characteristics

// JS 中的对象，像 Map 一样是开放着的，可以随时随地的动态添加 key-value 进去
student.teacher = '小何';
student['master'] = '肖战';
console.log(student);
student['say'] = person.say;
student.say('世界');

2. When there are multiple objects

Method 1 ※Recommended

function createStudent(name, age) {
    
    
    var s = {
    
    
        name: name,
        age: age
    };

    s.sayHello = function (target) {
    
    
        console.log("你好，" + target);
    };

    return s;
}

var o1 = createStudent('张三', 13);
var o2 = createStudent('李四', 14);

Method 2: Constructor

// JS 中本身是没有类的概念的，可以把（大写） Student 这个函数暂时当成类 + 构造方法去使用   
// 构造函数的函数名首字母一般是大写的
function Student(name, age) {
    
    
    // this 代表当前对象 ：把整个函数当成构造函数
    this.name = name;
    this.age = age;
    this.sayHello = function (target) {
    
    
        console.log("Hello，" + target);
    };
    // 不需要 return ：理解 整个函数是构造函数，所以没有返回值
}

var o1 = new Student('王五', 15);
var o2 = new Student('赵六', 16);

Beware of easy mistakes

Method 3: Syntactic sugar form

//在ES6中引入了class关键字，可以按照Java的方式来创建类和对象
//没有访问限定，认为都是 public 的

class Student {
    
    
    // 由于 js 对象中的属性是开放的，可以随时随地添加，所以不规定属性

    // constructor : 构造方法，无论 class 叫什么名字
    constructor(name, age) {
    
    
        this.name = name;
        this.age = age;
    }

    // 规定：这里不用写 function 了
    sayHello(target) {
    
    
        console.log('你好 ' + target);
    }
}

var o1 = new Student('钱七', 17);

this use

• This in JS is more complicated. Currently, this can be used as the current object.
• For details, please visit: https://juejin.im/post/5b8a48b6f265da432e75daae

class Student {
    
    
    constructor(name, age) {
    
    
        this['name'] = name;    // 这种形式也可以
        this.age = age;   // this.age 当前对象中的 age
    }

    introduce() {
    
    
        // 规定：必须是 this.name，不能省略 this，写成 name
        console.log(this.name + ", " + this['age']);
    }
}

var o1 = new Student('李一', 111);
o1.introduce();

Second, the difference between JavaScript objects and Java objects

1. There is no concept of "class" in JS

• Objects are actually "properties" + "methods" (key-value). Objects in Java are limited key-values. When the key is defined at the beginning of the class, the classes are specified, and the type is also determined.
• The class is equivalent to extracting the properties and methods of some common objects separately, which is equivalent to a "moon cake mold".
• A "constructor" in JavaScript can have a similar effect. And even if you don't use a constructor, you can specify some objects at any time by { }.

2. JS objects do not distinguish between "properties" and "methods"

• Functions in JavaScript are "first-class citizens", just like ordinary variables. Variables that store functions can be called and executed through ( ).

3. JS objects do not have access control mechanisms such as private/public

• All objects in JS are public.

4. JS objects have no "inheritance"

• The essence of inheritance is to "associate two objects". Or let one object reuse the properties/methods of another object. A similar effect is achieved in JavaScript using the "prototype" mechanism.

prototype chains

• such as the one shown before
  

5. JavaScript does not have “polymorphism”

• Three principles of object orientation:

  • Package: There is a package, which is relatively shallow, and it is a very preliminary package.
  • Inheritance: The way of using the prototype chain.
  • Polymorphism: JS is inherently polymorphic due to its lack of type restrictions.

• Statically typed languages ​​such as Java are stricter about type constraints and validation. Therefore, the effect of polymorphism is achieved by inheriting the parent class and overriding the methods of the parent class.

• Dynamic types are supported in JS, and there is no need to make a clear distinction between the types of objects when using a method of an object. So there is no need to support polymorphism at the syntactic level.

Example

• It is customary to call this approach a duck type. When dealing with an object, it doesn't matter whether it is a duck or not, as long as it meets the characteristics (yellow hair, "quack" sound, and wings), it is the object we want.

function f(o) {
    
    
   o.say();
}

f({
    
    
    say: function () {
    
     console.log('我是临时构造的对象')}
});

function f(o) {
    
    
    // 根本不管 o 是什么类型，只要求: o 这个对象有 key 是 say 的 value
    // 并且 value 的值是 function 
    o.say();
}

function Student() {
    
    
    this.say = function() {
    
     console.log('我是学生'); }
}
var o = new Student();
f(o);