Objects
Meaning: a set of unordered attributes, properties which may comprise the base value, the object or function. "Strictly speaking, the object is a set of values in no particular order, then it certainly is a reference data types.
Properties of an object type
When es5 defined characteristic (attribute) was used only inside, it describes various characteristic properties (property prototype) of. es5 These characteristics are used to achieve JavaScript engine, so they can not directly access the Js;
js property in two ways: data access attributes and properties
1. The data attributes (characteristic 4)
- [Configurable] Boolean property can be passed delete delete (default true)
- [Enumerable] Boolean attributes can loop back for-in (default true)
- [Writable] Boolean attribute can modify the value (default true)
- [Value] Boolean attribute contains the data value (the default is undefind)
Use Object.defineProperty () method to modify the default behavior properties;
accept parameters (where object attributes, the attribute name, a descriptor object) property descriptor (descriptor) of the object must be:
Configurable,
Enumerable,
Writable and
value provided wherein one or more values
ps1: multiple calls Object.defineProperty () method to modify the same property, in the configurable attribute to false
will be limited after the
var people = {};
Object.defineProperty(people, 'name', {
configurable: false
});
people.name = '12';
console.log(people); // undefined
ps2: call Object.defineProperty () when setting property empty object, if not specified, configurable, enumerable
and defaults writable properties are false
console.log(Object.prototype);
var people = {};
Object.defineProperty(people, 'name', {});
people.name = '12';
console.log(people); // undefind
Access Properties (includes a pair of children getter and setter functions)
during read access properties, calls getter function, which is responsible for returning a valid value
write access properties, calls the setter function and pass the new value, this function is responsible for deciding how to handle the data
have four characteristics
[Configurable] Boolean property can be passed delete delete (default to true)
[Enumerable] Boolean able to cycle back through the for-in property (default to true)
[the Get]: reading property when you call the function. The default value is undefined
[the Set]: function called when writing property. The default value is undefined
Accessor property can not be created directly, you must use Object.defineProperty () is defined
var book = {
_year: 200,
edit: 1
};
Object.defineProperty(book, 'year', {
get: function() {
return this._year;
},
set(newValue) {
if (newValue > 2004) {
this._year = newValue;
this.edit = newValue - 2004;
}
}
});
book.year = 2008;
console.log(book);
Vue two-way data binding is Object.defineProperty () method out of
simply said that under the principle of vue
- () To create a virtual DOM by document.createDocumentFragment
- It will be defined by Object.defineProperty data interception, the interception of the data changes.
- By subscribing - Publisher mode, trigger Watcher (observer), thereby changing the virtual dom in specific data
- By updating element value of virtual dom, dom element to change the value of the final rendering, complete two-way binding
About document.createDocumentFragment () method
Create objects - Design Patterns
Reference Redbook ah, do not make any explanation, that is, in fact, you usually let you see when writing code also uses design patterns, there is a design pattern interviewing people ask point do not know what is!
Factory Pattern
To put it plainly, just like your own packaging methods, and finally returns an object, you may have written this pattern of
function createPeople(name, age) {
var o = new Object();
o.name = name;
a.age = age;
o.say = function() {
return this.name;
};
return o;
}
// 实例化对象
var p1 = new createPeople('里斯', 12);
var p2 = new createPeople('大钟', 16);
Constructor mode
The constructor is defined in the Global objects (window object in the browser) in often write it, if you do not know, that es6 the class you've ever seen it!
function Animal(name, age) {
this.name = name;
this.age = age;
this.say = function() {
return this.name + ' : ' + this.age;
};
}
// ps 一个面试题
// 要创建 Animal 的新实例，必须使用 new 操作符。调用构造函数实际上会经历以下 4 个步骤:
// (1) 创建一个新对象;
// (2) 将构造函数的作用域赋给新对象(因此 this 就指向了这个新对象);
// (3) 执行构造函数中的代码(为这个新对象添加属性);
// (4) 返回新对象
/**
* 构造函数当作函数
* 1. 构造函数与其他函数的唯一区别，就在于调用它们的方式不同
* 2. 任何函数，只要通过 new 操作符来调用，那它就可以作为构造函数
* 3. 任何函数，不通过 new 操作符来调用，那它跟普通函数也不会有什么两样
*/
// 构造函数实例化调用 => 使用dog
var dog = new Animal('狗', 12);
dog.say();
// 普通调用 => 使用window
Animal('猫', 2);
console.log(window.say());
// 在另一个对象的作用域中调用
var s = {};
Animal.call(s, '狐狸', 2);
console.log(s.say());
Parasitic constructor mode
function SpecialArray() {
//创建数组
var values = new Array();
values.push.apply(values, arguments);
//添加方法
values.toPipedString = function() {
return this.join('|');
};
//返回数组
return values;
}
var colors = new SpecialArray('red', 'blue', 'green');
console.log(colors.toPipedString()); //"red|blue|green"
Prototype mode
- Each function has created a prototype (prototype) property,
- This property is a pointer to an object,
- And it contains all the properties and methods of a shared object instance
function Person() {}
Person.prototype.name = 'jooker';
Person.prototype.age = 19;
Person.prototype.say = function() {
return this.name;
};
var p = new Person();
console.log(p.__proto__=== Person.prototype)
console.log(p.constructor === Person)
console.log(Person.prototype.constructor === p.constructor)
And a combination mode constructor prototype pattern
function Person(name) {
this.name = name;
this.friends = ['Shelby', 'Court'];
}
Person.prototype = {
constructor: Person,
sayName: function() {
return this.name;
}
};
var person1 = new Person('Nicholas');
var person2 = new Person('Greg');
person1.friends.push('Van');
console.log(person1.friends); //"Shelby,Count,Van"
console.log(person2.friends); //"Shelby,Count"
Dynamic prototype model
function Person(name,age){
this.name = name;
this.age = age;
// 方法
if(typeof this.sayName != "function"){
Person.prototype.sayName = function(){
return this.name;
}
}
}
var p = new Person("Nick",25);
console.log(p.name)
console.log(p.age)
console.log(p.sayName())
Constructors safe mode
function Add(a, b) {
var o = new Object();
o.say = function() {
return a;
};
return o;
}
var sum = Add(1,2);
console.log(sum.say())
ECMAScript is a function of the object, and therefore each define a function, i.e. to instantiate an object
(the prototype: Prototype explicit, proto : implicit prototype, prototype chain: also called implicit prototype chain)
there is to know that, js in the prototype, the prototype chain, context, when the code is run in a hosted environment determined and scope, is when you write code to determine the
Understanding the prototype object
- Whenever creating a new function is created in accordance with a rule for the function prototype property, the function prototype object point (i.e., a function is created, the first step is performed within this.proterty = {})
- By default, all automatically obtain a prototype object constructor (the constructor) property, which contains a pointer to where the pointer to the function prototype property (prototype constructor function object constructor === Example)
- Methods and properties can be added through this on the prototype prototype
- After you create a custom function, its prototype object is only a default constructor property, and other methods are inherited from the Object
- After creating the instance inside the instance will contain a pointer ( proto : implicit prototype), point constructor prototype object (prototype: Explicit prototype) (that is, once you create an instance of the object, the first to add a inside the proto
property, this is each object has a)
