Introduction to js (ES6) [4]---Object

Recommended rookie tutorial https://www.runoob.com/w3cnote/es6-object.html
This article also intersperses with functions. If you don’t understand the
introduction of mobile js (ES6) [五]—function

What is an object?

The object is an individual. For example, human attributes have ears, eyes, noses, etc. People move, eat and talk.

Define the object

Objects have attributes like people have eyes and noses
Objects have methods like people can talk and eat

Attribute definition

The methods in the code can be

1. name:"attribute value" or "name":"attribute value"
2. If you define externally, such as var phone = 123456, then you can write phone directly inside because it is a named parameter
3. String splicing form [str1+str2] = "xxxxx" For example, str1="na" str2="me" Then here is name="xxxxx"
4. The expansion operator passes in all the parameters of the array but the attribute name will start from 0
5. The object directly passes in another object for use

var phone = 123456;
var loves = ["eat","lashi"];
var hate = {
    
    
	best: "eat shit",
	low: "eat myself"
}；
var people = {
    
    
	name: "dmhsq",
	"smallName": "dog",
	["ol" + "d"]: 18,
	phone,
	...loves，
	hate
}

console.log(people.name)
console.log(people.smallName)
console.log(people.old)
console.log(people.phone)
console.log(people)
console.log(people.hate)

The print result is as follows

Method definition

The method name can use the type of attribute definition. Note that the attribute name

The method is actually the property of the object but it can be executed

There are many ways to define a method

1. The general definition is similar to the following say say: function(){xxxx}
2. Refer to the look of the external method as follows. Write saliva like this when defining the reference externally: look or look directly
3. When referring to other object method references, write touchDog: dog.bark

function look() {
    
    
	return "wow! beautiful girl !"
}
var dog = {
    
    
	bark: function() {
    
    
		return " Woof, woof, woof "
	}
}
var people = {
    
    
	name: "dmhsq",
	smallName: "dog",
	say: function() {
    
    
		return "I am a people my name is " + this.name
	},
	["e" + "at"]: function() {
    
    
		return this.say() + "I eat you"
	},
	saliva: look,
	look,
	touchDog: dog.bark
}

console.log(people.name)
console.log(people.smallName)
console.log(people.say())
console.log(people.eat())
console.log(people.saliva())
console.log(people.look())
console.log(people.touchDog())

Extended (new) attributes

method one

It is defined as follows that a people has only one name attribute, we add an old attribute,
and compare the people before and after the increase

var people = {
    
    
	name: "dmhsq"
}
console.log(people.name)
console.log(people.old)
console.log(people)
people.old = 18
console.log(people.old)
console.log(people)

Method Two

Shallow copy
using Object.assign()

Object.assign (ontology, extension 1, extension 2...)

Use the following
Object.assign(people,(old:18))
or you
can also refer to external properties
var old = 18;
Object.assign(people,(old))

Example

var people = {
    
    
	name: "dmhsq"
}
console.log(people.name)
console.log(people.old)
console.log(people)
Object.assign(people, {
    
    
	old: 18
})
people.old = 18
console.log(people.old)
console.log(people)

Expansion (new method)

It's the same as the new attribute. After all, everyone is the attribute but the type is different.

method one

people.say = function() {
    
    
	return "hello"
}
或者
function say() {
    
    
	return "hello"
}
people.say = say

var people = {
    
    
	name: "dmhsq"
}
console.log(people.name)
console.log(people)
people.say = function() {
    
    
	return "hello"
}
console.log(people.say())
console.log(people)

Method Two

First of all, what if we don't add the say method and call it directly?

var people = {
    
    
	name: "dmhsq"
}
console.log(people.name)
console.log(people.say())
console.log(people)

The answer is an error

We add a method

Shallow copy
using Object.assign()

Object.assign (ontology, extension 1, extension 2...)

Use as follows

Object.assign(people, {
    
    
	say: function() {
    
    
		return "hello"
	}
})

You can also refer to external functions

function say() {
    
    
	return "hello"
}
Object.assign(people, {
    
    
	say
})

Example

var people = {
    
    
	name: "dmhsq"
}
console.log(people.name)
console.log(people)
Object.assign(people, {
    
    
	say: function() {
    
    
		return "hello"
	}
})
console.log(people.say())
console.log(people)

About this

In fact, we have always omitted this.
Generally this refers to window
because this refers to window in the window object.

var people = {
    
    
	name: "dmhsq"
}
var num1 = 1;


console.log(this.people)
console.log(this.num1)
console.log(this)
console.log(window)

But in the objects under the window, such as people

var people = {
    
    
	name: "dmhsq",
	say: function() {
    
    
		console.log(this)
	}
}
console.log(this)
console.log(window)
people.say()