JavaScript对象object 原创邦

JavaScript对象object

学对象前，要先了解javascript的入门和代码块

对象就是相关数据和功能函数的集合。也被称为对象的属性和方法。

创建一个对象往往从定义和初始化一个变量。

const person = {};

> person
[object object]
Object {}
{ }

你已经创建了你的第一个对象。是个空对象，下面更新下：

const person = {
  name: ['Bob', 'Smith'],
 age: 32,
 gender: 'male',
 interests: ['music', 'sking'],

  bio: function() {
    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');  },
  greeting: function() {
    alert('Hi! I\'m ' + this.name[0] + '.');
  }
}

调用:

person.name
person.name[0]
person.age
person.interests[1]
person.bio()
person.greeting()

person 函数名，作为namespace,要先进入对象namespace，才能访问封装（encapsulated）在对象里面的内容。

sub-namespace
It is even possible to make the value of an object member another object. For example, try changing the name member from

Here we are effectively creating a sub-namespace.
This sounds complex, but really it's not — to access these items you just need to chain the extra step onto the end with another dot. Try these in the JS console:

person: {
  name: {
    first: 'Bob',
    last: 'Smith'
  }
}

person.name.first
person.name.last

点符号和bracket符号(方括号符号）

person.age
person.name.first

You can use

person['age']
person['name']['first']

It is no wonder that objects are sometimes called associative arrays — they map strings to values in the same way that arrays map numbers to values.

One useful aspect of bracket notation is that it can be used to set not only member values dynamically, but member names too.

Let's say we wanted users to be able to store custom value types in their people data, by typing the member name and value into two text inputs. We could get those values like this:

let myDataName = nameInput.value;
let myDataValue = nameValue.value;

We could then add this new member name and value to the person object like this:

person[myDataName] = myDataValue;

Adding a property to an object using the method above isn't possible with dot notation, which can only accept a literal member name（文本的成员名）, not a variable value pointing to a name.

‘this’ 是指包含他的对象。

when we start creating constructors and so on, ‘this’ is very useful 。当我们创建构造函数时候，‘this’很有用。

Let's illustrate what we mean with a simplified pair of person objects:

const person1 = {
  name: 'Chris',
  greeting: function() {
    alert('Hi! I\'m ' + this.name + '.');
  }
}

const person2 = {
  name: 'Deepti',
  greeting: function() {
    alert('Hi! I\'m ' + this.name + '.');
  }
}

In this case, person1.greeting() outputs "Hi! I'm Chris."; person2.greeting() on the other hand outputs "Hi! I'm Deepti.", even though the method's code is exactly the same in each case. As we said earlier, this is equal to the object the code is inside — this isn't hugely useful when you are writing out object literals by hand, but it really comes into its own when you are dynamically generating objects (for example using constructors). It will all become clearer later on.

When you accessed the document object model using lines like this:

const myDiv = document.createElement('div');
const myVideo = document.querySelector('video');

You were using methods available on an instance of the Document class. For each webpage loaded, an instance of Document is created, called document, which represents the entire page's structure, content, and other features such as its URL. Again, this means that it has several common methods and properties available on it.

Note: It is useful to think about the way objects communicate as message passing — when an object needs another object to perform some kind of action often it sends a message to another object via one of its methods, and waits for a response, which we know as a return value.

阅读量: 697
发布于: 2021-09-17
修改于: 2021-09-17