jsの紹介(ES6)[4] ---オブジェクト

推奨される新人チュートリアルhttps://www.runoob.com/w3cnote/es6-object.html
この記事にも関数が散在しています。モバイルjs(ES6)[五] —関数の紹介を理解していない場合

オブジェクトとは何ですか?

オブジェクトは個人です。たとえば、人間の属性には耳、目、鼻などがあります。人々は動き、食べ、話します。

オブジェクトを定義する

オブジェクトには、人が目や鼻を持っているような属性があります
オブジェクトには、人が話したり食べたりできるようなメソッドがあります

属性定義

コード内のメソッドは次のようになります

  1. 名前: "属性値"または "名前": "属性値"
  2. var phone = 123456のように外部で定義する場合、名前付きパラメーターであるため、電話を直接内部に書き込むことができます。
  3. 文字列スプライシングフォーム[str1 + str2] = "xxxxx"たとえば、str1 = "na" str2 = "me"次に、name = "xxxxx"
  4. 展開演算子は配列のすべてのパラメーターを渡しますが、属性名は0から始まります
  5. オブジェクトは、使用するために別のオブジェクトを直接渡します
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)

印刷結果は以下のとおりです。
ここに画像の説明を挿入

メソッド定義

メソッド名は、属性定義のタイプを使用できます。属性名に注意してください。

メソッドは実際にはオブジェクトのプロパティですが、実行することもできます

メソッドを定義する方法はたくさんあります

  1. 一般的な定義は、次のように言います:function(){xxxx}
  2. 外部メソッドの外観を次のように参照します。参照を外部で定義するときは、次のように唾液を記述します。
  3. 他のオブジェクトメソッド参照を参照する場合は、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())


ここに画像の説明を挿入

拡張(新しい)属性

方法1

人には名前属性が1つしかないことを次のように定義し、古い属性を追加して
、増加の前後の人を比較します。

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)

ここに画像の説明を挿入

方法2


Object.assign()を使用した浅いコピー

Object.assign(オントロジー、拡張機能1、拡張機能2 ...)

次の
Object.assign(people、(old:18))を使用する

、外部プロパティを参照することもできます
var old = 18;
Object.assign(people、(old))

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)

ここに画像の説明を挿入

拡張(新方式)

新しい属性と同じです

方法1

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)

方法2

まず、sayメソッドを追加せずに直接呼び出すとどうなりますか?

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

答えはエラーです

ここに画像の説明を挿入

メソッドを追加します


Object.assign()を使用した浅いコピー

Object.assign(オントロジー、拡張機能1、拡張機能2 ...)

次のように使用します

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

外部関数を参照することもできます

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

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)

ここに画像の説明を挿入

これについて

実際、これは常に省略しています。
これは
ウィンドウオブジェクトのウィンドウ参照するため、通常、これはウィンドウを参照します

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


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


ここに画像の説明を挿入

しかし、窓の下のオブジェクト、たとえば人

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

ここに画像の説明を挿入

おすすめ

転載: blog.csdn.net/qq_42027681/article/details/114045537