La sección avanzada del objeto js comprensión vue de dos vías de enlace de datos y patrones de diseño para crear objetos ---

objetos

Significado: un conjunto de atributos no ordenadas, propiedades que pueden comprender el valor base, el objeto o función. "Estrictamente hablando, el objeto es un conjunto de valores en ningún orden en particular, entonces sin duda es un tipo de datos de referencia.

Propiedades de un tipo de objeto

Cuando se utilizó ES5 característica definida (atributo) sólo en el interior, que describe diversas propiedades características (prototipo propiedad) de. ES5 Estas características se utilizan para lograr motor de JavaScript, así que no pueden acceder directamente a los Js;

js propiedad de dos maneras: atributos de acceso a datos y propiedades

1. Los atributos de datos (carácter 4)

  1. [Configurable] propiedad booleana se puede pasar de eliminación de eliminación (por defecto true)
  2. [Enumerable] Boolean atribuye de nuevo bucle lata para-in (por defecto true)
  3. [Escribir] atributo booleano puede modificar el valor (por defecto true)
  4. [Valor] atributo booleano contiene el valor de los datos (el valor predeterminado es undefind)

utilice el método Object.defineProperty () para modificar las propiedades de comportamiento por defecto;
aceptar parámetros (si los atributos de objeto, el nombre del atributo, un objeto descriptor) descriptor de propiedad (descriptor) del objeto deben ser:
configurable,
Enumerable,
grabable y
valor proporcionado en el que uno o más valores

PS1: múltiple llama al método Object.defineProperty () para modificar la misma propiedad, en el atributo configurable para falsa
será limitado después de la

var people = {};
Object.defineProperty(people, 'name', {
  configurable: false
});
people.name = '12';
console.log(people);   // undefined 

Aquí Insertar imagen Descripción

PS2: Llamada Object.defineProperty () al establecer la propiedad objeto vacío, si no se especifica, configurable, enumerables
propiedades y valores por defecto de escritura son falsas

    console.log(Object.prototype);
    var people = {};
    Object.defineProperty(people, 'name', {});
    people.name = '12';
    console.log(people);   // undefind

Aquí Insertar imagen Descripción

Propiedades de Acceso (incluye un par de niños getter y setter funciones)
durante propiedades de acceso de lectura, llamadas getter función, que es responsable de devolver un valor válido
propiedades de acceso de escritura, llama a la función setter y aprobar el nuevo valor, esta función es responsable de decidir cómo manejar los datos
tienen cuatro características
[configurable] propiedad booleana se pueden pasar de eliminación de eliminación (por defecto a true)
booleana capaz de volver ciclo a través de la para-en propiedad (por defecto a true) [Enumerable]
[The Get]: la propiedad de lectura cuando se llama a la función. El valor por defecto es indefinido
[Set]: función llamada al escribir propiedad. El valor por defecto está definido

Acceso de propiedad no puede ser creado directamente, debe utilizar Object.defineProperty () se define

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);

unión Vue de dos vías de datos es el método de Object.defineProperty ()
simplemente dijo que bajo el principio de vue

  1. () Para crear un DOM virtual document.createDocumentFragment
  2. Se define por la interceptación de datos Object.defineProperty, la interceptación de los cambios de datos.
  3. Mediante la suscripción - modo Publisher, gatillo Vigía (observador), cambiando de este modo el DOM virtual en datos específicos
  4. Con la actualización de valor del elemento de Dom virtual, elemento DOM para cambiar el valor de la prestación final, completa la unión de dos vías

Sobre document.createDocumentFragment método ()
Aquí Insertar imagen Descripción

Crear objetos - patrones de diseño

Referencia Redbook ah, no hacer ninguna explicación, que es, de hecho, por lo general le permiten ver al escribir código también utiliza patrones de diseño, hay un patrón de diseño de entrevistar a la gente pregunta punto de no saber lo que es!

patrón de la fábrica

Para decirlo claramente, al igual que sus propios métodos de envasado, y finalmente devuelve un objeto, es posible que haya escrito este patrón de

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);

modo constructor

El constructor se define en el Mundial de objetos (objeto de ventana en el navegador) en la frecuencia escribirlo, si usted no sabe, que ES6 la clase que alguna vez has visto!

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());

Modo constructor parasitaria

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"

modo de prototipo

  • Cada función ha creado un prototipo (prototipo) Propiedad,
  • Esta propiedad es un puntero a un objeto,
  • Y contiene todas las propiedades y métodos de una instancia de objeto compartido
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)

Y un patrón prototipo constructor modo de combinación

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"

prototipo de modelo dinámico

 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())

Constructores de modo seguro

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 es una función del objeto, y por lo tanto cada uno definir una función, es decir, a instancias de un objeto
(el prototipo: Prototipo explícita, proto : prototipo implícita, cadena de prototipo: también llamada cadena de prototipo implícita)
que hay que saber que, js en el prototipo, la cadena de prototipo, el contexto, cuando el código se ejecuta en un entorno alojado determinados y alcance, es cuando se escribe código para determinar la

La comprensión del objeto prototipo

  1. Siempre que la creación de una nueva función se crea de acuerdo con una regla para la propiedad prototipo de la función, el punto objeto de función prototipo (es decir, se crea una función, el primer paso se realiza dentro de this.proterty = {})
  2. Por defecto, todos obtener automáticamente un constructor objeto prototipo (el constructor) propiedad, que contiene un puntero a donde el puntero a la propiedad función prototipo (prototipo de función constructor objeto constructor === Ejemplo)
  3. Métodos y propiedades se pueden añadir a través de este en el prototipo prototipo
  4. Después de crear una función personalizada, su objeto prototipo es sólo una propiedad constructor por defecto, y otros métodos se heredan del objeto
  5. Después de crear la instancia dentro de la instancia contendrá un puntero ( proto : prototipo implícita), punto de constructor de objetos prototipo (prototipo: prototipo Explicit) (es decir, una vez que se crea una instancia del objeto, el primero a insertar una dentro del proto
    propiedad, esto es cada objeto tiene a)
Publicado 63 artículos originales · ganado elogios 100 · vistas 310 000 +

Supongo que te gusta

Origin blog.csdn.net/qq_36407748/article/details/88027077
Recomendado
Clasificación