EDITORIAL
Esta serie de artículos es a través del estudio de los "Patrones de Diseño JavaScript", resume el libro vienen, tan sólo comience a sentir cuando acaba de aprender a leer, ya no hay necesidad de tomar notas, pero más tarde se encontró el libro para entender algunos de los contenidos y no es muy fácil, por lo que el libro se describe en conjunción con su propia comprensión también a ordenar un poco y una nota de ella, y esperamos aprender juntos, el artículo si he entendido bien el contenido, por favor, la crítica y el progreso común ~
directorio
Y aplicar los conceptos básicos de la llamada
contenido
este conocimiento básico
JS cuando aprendemos el más desconcertante es que este, con una gran cantidad de idiomas son, esto es siempre en JS es un objeto, pero este no es el punto de esta función se define en la definición del objeto o cuando OK, pero cuando se corre el programa se trata de una unión dinámica. Aquí echamos un vistazo a algunos de los escenario más común en este punto es:
1, funciona como un llamadas de método objeto
Cuando escribimos código, si vamos a llamar a la función como método de un objeto, como por ejemplo "obj.code ()", entonces este momento estamos Esto siempre ha venido señalando a este objeto, nos fijamos en el siguiente pasaje código:
var objectone = {
name: 'xbeichen.cn',
getName: function () {
console.log(this === objectone);
console.log(this.name);
}
};
objectone.getName();
Se puede ver de lo anterior, nuestra función getNombre es un objeto objectone método, en la línea 8 que llamamos a esta función objectone.getName (), la función en el interior de esta unión a objectone el objetivo anterior dinámico, así que conseguimos el resultado en la figura anterior.
2, funciona como una llamada a la función ordinaria
En la mayoría de los casos vamos a funcionar sólo como una llamada a la función ordinaria, esta vez se trata de un puntero al objeto global por defecto en nuestro navegador JS dentro del objeto global es el objeto de la ventana por defecto, pero en este caso ES5 de estricta modo es menos preciso, cuando en ES5 funciones del modo estricto como una llamada a la función normal, esta disposición no es nuestro punto al objeto global, pero punto indefinido. Mira los dos casos siguientes:
escena común:
window.name = "xbeichen.cn";
var getName = function () {
return this.name;
};
console.log(getName());
//或者这样
var objecttwo = {
name: "test",
getName: function () {
return this.name;
}
};
var getNameNew = objecttwo.getName;
console.log(getNameNew());
Lo anterior dos piezas de código se puede ver, la primera pieza de código se entiende bien, getName () se invoca como una función normal, el interior en función de esto apunta a la ventana de objeto global predeterminada; el segundo párrafo del código que definen primero un objeto, este objeto también tiene un atributo de nombre, a continuación, vamos a citar a esta dirección método de objeto getName () a una variable getNameNew, entonces esta variable para llamar al objeto dentro del método, cuando, de hecho, por en forma de función ordinaria a la llamada, por lo que este aquí se sigue apuntando al objeto de ventana global, por lo que vemos la imagen de salida anterior.
Si se utiliza el modo estricto código ES5 arriba para escribir, sería el siguiente escenario:
Estricta modo de escena:
"use strict"
window.name = "xbeichen.cn";
var getName = function () {
return this.name;
};
console.log(getName());
//或者这样
var objecttwo = {
name: "test",
getName: function () {
return this.name;
}
};
var getNameNew = objecttwo.getName;
console.log(getNameNew());
El código se ejecuta en modo estricto de ES5, podemos ver el resultado final está dando a correr, diciendo que no se encontró atributo "name" de este, pero advertido claramente los atributos código especifica el nombre del objeto ventana ah, esta es la razón ? La razón es que hemos dicho antes, en modo estricto ES5, que se encuentra dentro de esta llamada de función como una función ordinaria es un punto sin punto más en el objeto de ventanas por defecto no definida, por lo que aunque hemos definido el atributo de nombre del objeto ventana, pero todavía se quejará se está ejecutando. Con el fin de ver más claramente esto en el final de esto significa que existe en tiempo de ejecución, vamos a echar un vistazo a continuación, ejecute el siguiente código:
"use strict"
window.name = "xbeichen.cn";
var getName = function () {
return this;
};
console.log(getName());
//或者这样
var objecttwo = {
name: "test",
getName: function () {
return this;
}
};
var getNameNew = objecttwo.getName;
console.log(getNameNew());
En el código anterior, modificamos la función de código original devuelve un valor, simplemente devuelve esto, esta vez no son los códigos de error, y finalmente volvió a indefinido, lo que valida nuestra dijo antes: en modo estricto de ES5 a continuación, cuando la función se llama como una función ordinaria dentro, es este momento indefinido, y ya no apuntan al objeto de ventana por defecto.
Funcionan como una llamada a la función habitual de la escena a menudo nos encontramos una situación: en el caso de un nodo DOM tiene una función local, esta vez como una función local es una llamada a la función ordinaria, sino que apunta al interior de esta ventana, pero la voluntad original es que el interior de este apunta al nodo DOM. Con el fin de resolver los problemas anteriores, nos fijamos en el siguiente código:
Código original:
<body>
<div id="xbeichen">
click me
</div>
<script>
window.id = "xbeichen.cn";
document.getElementById("xbeichen").onclick = function () {
console.log(this.id);
var currentCallback = function () {
console.log(this.id);
};
currentCallback();
}
</script>
</body>
El código se puede ver que opera resultados, haga clic en el nodo div caso, la primera vez que se ejecuta este comando de salida de este es un puntero a nuestro nodo DOM, lo cual es consistente con nuestras ideas, pero en las funciones locales currentCallback evento Click () el punto de que esto era una ventana, que al contrario de nuestra intención original, por lo que hemos desarrollado el más típico JS "esta pérdida" situación. Entonces, ¿cómo podemos resolver este problema, de hecho, muy simple, ya que la función local en este punto para el cambio, entonces vamos a la mano de nuevo al punto de modificar OK, entonces, el código modificado es el siguiente:
Después de que el código optimizado:
<body>
<div id="xbeichen">
click me
</div>
<script>
window.id = "xbeichen.cn";
document.getElementById("xbeichen").onclick = function () {
var _self = this;
console.log(this.id);
var currentCallback = function () {
console.log(_self.id);
};
currentCallback();
}
</script>
</body>
Por encima de código optimizado puede verse, de hecho, hemos aumentado la "var = _self esto;" Esta línea de código, nuestro papel es hacer clic en el interior de este acontecimiento de unión en la variable personalizada _self anterior, después de lo que ates en haga clic en evento anidado dentro de una función local de cuántas capas, siempre y cuando _self variable para obtener esto, se llega a este punto ha sido siempre el nodo DOM.
3, llamadas a constructores
Nadie sabemos por la clase JS, todos los objetos que se basan en una copia del prototipo, pero estamos codificación, se puede utilizar el constructor y el operador new para crear un objeto, tales miradas de redacción también como un constructor de la clase. Además de una constructora existente ofrecemos una serie de JS, JS mayoría de las funciones se pueden utilizar como un constructor, la función constructora y la función normal puede ser exactamente el mismo, la única diferencia es su vocación realización, la función constructor para llamar a través de la nueva operador.
Cuando la llamada a la función constructora para crear un objeto, lo Constructor función siempre devuelve un objeto, por lo general, funcionamos dentro del constructor que esto apunta al objeto que se devuelve, el siguiente código:
var myBlog = function () {
this.url = "http://www.xbeichen.cn";
};
var blogone = new myBlog();
console.log(blogone.url);
Por encima hemos dicho, en circunstancias normales, crear objetos utilizando el constructor cuando el constructor dentro de este punto es devolver este objeto, que en circunstancias especiales lo que es? Si creamos un objeto con el constructor, el constructor devuelve un objeto de forma explícita, a continuación, nos encontramos con el objeto devuelto, pero no antes de mirar hacia adelante a esto, el siguiente código:
var myBlog = function () {
this.url = "http://www.xbeichen.cn";
return {
url: "http://www.geov.online"
}
};
var blogone = new myBlog();
console.log(blogone.url);
El código se puede ver, la configuración es explícitamente devuelve un objeto, en este momento recibimos la propiedad url url atributo atributo url explícitamente sobre constructor de objeto no está definido, pero si la estructura no lo hace rendimientos explícitos del objeto, no hará que el caso anterior, incluso si se devuelve un no-presentación del tipo de objeto de datos, de la siguiente manera:
var myBlog = function () {
this.url = "http://www.xbeichen.cn";
return "http://www.geov.online";
};
var blogone = new myBlog();
console.log(blogone.url);
4, Function.prototype.call 和 Function.prototype.apply
En comparación con los tres casos anteriores, y más Function.prototype.call Function.prototype.apply es el uso del cambio anterior introducida en la función de este punto el problema, vamos a ver el código es fácil de entender, más conocimiento voluntad en la segunda mitad de hacer Detalles:
var myBlog1 = {
url: "http://www.xbeichen.cn",
getUrl: function () {
return this.url;
}
};
var myBlog2 = {
url: "https://xuqwblog.blog.csdn.net/"
};
console.log(myBlog1.getUrl());
console.log(myBlog1.getUrl.call(myBlog2));
Puede ser visto por el código, definimos dos objetos, el resultado es la primera línea de sentencia de salida de acuerdo con el modo normal de escritura, también obtuvimos los resultados deseados; método, sin embargo, la segunda instrucción que llamamos () para dinámicamente cambiando el objeto unido a myBlog1 este punto, será ligada a myBlog2 cambio de objeto, de modo que la salida 2 de atributo los objetos anteriores de URL.
Por encima de cuatro casos son los más comunes en la escena cuando codificamos este punto, además de los anteriores cuatro escenas, así como menos común con eval y la escena, no se introducirá aquí, estamos interesados pueden poseer Baidu entender la siguiente, porque el número de todos los días se encontró en el desarrollo de no demasiado.
este problema de pérdida de
Nos fijamos en la pieza de código anterior:
var objecttwo = {
name: "test",
getName: function () {
return this.name;
}
};
console.log(objecttwo.getName());
var getNameNew = objecttwo.getName;
console.log(getNameNew());
El código se puede ver de lo anterior, la primera línea de atributo de salida nombre de sentencia nuestra producción normal, la segunda línea de salida de la instrucción de salida un valor nulo, esto se debe a la función de la primera instrucción de salida de línea getName () como un método de un objeto llamadas, por lo que este es el punto donde el objecttwo objeto; una segunda línea de salida de una instrucción de salida es nula porque aquí getNameNew () es una objecttwo.getName dirección de puntero sin embargo, pero en última instancia es la función invocada por una manera ordinaria, por lo que esta aquí es los puntos predeterminados al objeto de ventana global, la salida del valor nulo, si aquí usamos el modo estricto, a continuación, la segunda línea de los estados de salida será dado como:
Esto se debe a la ventana de objeto global que aquí no especificó su atributo de nombre. Es esta pérdida de uno de los casos, a continuación, nos fijamos en otro escenario.
Por encima de nosotros para el nodo específico dom cuando se utiliza el texto JS nativo "document.getElementById (" xbeichen ")" para obtener una ID de "xbeichen" de un div, que cuando se codifica un enfoque de este tipo es muy complicado, nos se puede utilizar como tal práctica prototype.js marco, se abrevian como sigue:
var getId = function (id) {
return document.getElementById(id);
};
getId("xbeichen");Desde entonces, con el fin de obtener el nodo específico dom en el proceso de seguimiento, simplemente llamamos método getId () para esto, así que mucho más simple, que podemos desear considerar otra redacción más sencilla:
var getId = document.getElementById;
getId("xbeichen");redacción anterior es más fácil que escribir prototype.js este marco, una sola línea de código para simplificar los nativos JS obtener un funcionamiento nodo DOM, pero se quejará a ejecutar en el navegador cuando esta es la razón? Cuando tuvimos el método getElemenById () en función de este documento es llamarlo, que utiliza esto, en este momento se trata de los puntos del documento al objeto, de modo que se escriba por un dom particular, nativa puede ser adquirido, pero a medida que el código anterior, la dirección de referencia con la variable document.getElementById getId, a continuación, llamar getId () cuando esta función, se hace la llamada a la función ordinaria, esta vez la función interna ya no está apuntando al objeto de documento, en lugar de señalar a el objeto de ventanas por defecto, por lo que dicho error una redacción. A continuación modificarlo bajo nuestro código, utilice la parte superior de la introducción de aplicar () para cambiar dinámicamente este punto, el código es el siguiente:
<div id="xbeichen"></div>
<script>
document.getElementById = (function (func) {
return function () {
return func.apply(document, arguments);
}
})(document.getElementById);
var getId = document.getElementById;
console.log(getId("xbeichen"));
</script>
Estos son los dos problemas más comunes de esta pérdida, además de nodo DOM antes de la función local evento en esta pérdida, esta pérdida ha presentado tres cuestiones con más detalle esta pérdida situaciones y soluciones serán tarde otra vez me lo solucionaron una introducir un artículo separado, disfrutar deseando.
Y aplicar los conceptos básicos de la llamada
Function.prototype.call y ES3 Function.prototype.apply dos métodos iniciadas a partir de los dos métodos definidos prototipos de las funciones de estas dos formas de escribir en el proceso real de desarrollo de código funcional es particularmente útil en el diseño y la JS también es de gran importancia y un amplio uso de estos dos métodos. El papel de los dos métodos de escala y aplica exactamente el mismo, sólo que con diferentes argumentos que pasan.
aplicar el método toma dos parámetros, el primer parámetro para este punto para especificar una función en el cuerpo, el segundo parámetro es una matriz o una matriz tipo, esto se aplicará el método de elementos de recogida o de matriz se pasan como parámetros a la llamada función.
método llamada también acepta dos parámetros, el primer parámetro también se usa para especificar un punto dentro de esta función, pero a partir del segundo parámetro se pasan secuencialmente a la función. Por lo que el número de parámetros pasados en una llamada al método no es fija, es más como un azúcar sintáctico en la parte superior de la aplicar el método, si sabemos cuántos función acepta parámetros y queremos expresar la correspondencia entre los parámetros formales y reales de un vistazo, que podemos llamar a los métodos para pasar parámetros, y si no nos importa cuántos parámetros específicos, a continuación, sólo tiene que utilizar el método para aplicar los parámetros a la función caerá a empujar en el ajo. Veamos ejemplos específicos de código:
aplicar métodos de demostración:
var testfunc = function (a, b, c) {
console.log([a, b, c]);
};
testfunc.apply(null, [1, 3, 2]);
método de presentación de llamada:
var testfunc = function (a, b, c) {
console.log([a, b, c]);
};
testfunc.call(null, 1, 9, 7);
En la primera pieza de código, colocamos los tres números en una matriz aprobada por la aplican función método TestFunc (), un conjunto de tres valores que corresponden respectivamente a los parámetros de la función a, b, c tres parámetros. JS intérprete, cuando se ejecuta primer parámetro de código y no tomar en cuenta que la diferencia en el número, tipo y orden de los argumentos, porque los parámetros JS dentro de la matriz está representado por una, por lo que podemos decir que se aplica el método mayor tasa de utilización de la llamada al método.
Al igual que los anteriores dos piezas de código, se aplica cuando se utiliza el método y la llamada, si pasamos el primer argumento es nulo, el cuerpo de esta función que apuntará al objeto host predeterminado, el navegador es el objeto de la ventana, si es en modo estricto ES5, este punto es nula, como sigue:
entorno de navegador:
var testfunc = function (a, b, c) {
console.log(this === window);
};
testfunc.call(null, 1, 9, 7);
El modo estricto:
var testfunc = function (a, b, c) {
"use strict"
console.log(this);
};
testfunc.call(null, 1, 9, 7);
Estos son la introducción básica a aplicar y métodos de llamadas, Echemos un vistazo a lo que son dos formas de usar.
aplicar y llamar a usos
Se mencionó anteriormente, aplicar y utilizar el método de llamada está particularmente extendida en los patrones de diseño JS dentro, y estos dos métodos es particularmente importante en la programación funcional existe, ya que son, al final ¿para qué sirve, hice un resumen de los tres usos siguientes, siguiendo a bajo detalle los diversos escenarios de uso.
1, de este punto al cambio
Al igual que como se mencionó anteriormente, aplicar y llamada de método más ampliamente utilizado se utiliza para punto a dinámicamente variar como una función de este cuerpo, como se muestra en el siguiente código:
window.url = "http://www.geov.online";
var myblog1 = {
url: "http://www.xbeichen.cn"
};
var myblog2 = {
url: "https://xuqwblog.blog.csdn.net/"
};
var getUrl = function() {
console.log(this.url);
};
getUrl();
getUrl.apply(myblog1);
getUrl.apply(myblog2);
El código anterior getUrl () una función de llamada común función in vivo de este defecto en el objeto de ventana, la salida del objeto ventana atributo url; sin embargo, cuando se utiliza la aplicación de métodos se invocan getUrl función (), una función del cuerpo de este punto son dinámicamente unido a las myblog1 y myblog2 objetos, las propiedades finales de objetos las dos salidas de URL.
Esto cambió escenario a menudo nos encontramos en el desarrollo, por encima mencionamos dos: En primer lugar, en el nodo de eventos DOM, este punto de la función local se cambiará al objeto de ventana por defecto, dos document.getElementById es en la corrección de esto apunta a la escena.
Sobre el nodo de eventos DOM, la función interna local de este cambio de escenario, estamos utilizando el enfoque más simple de resolver, a saber, la definición de una variable de _self, lo utilizan para guardar las referencias nodo DOM. Aquí podemos aplicar el mismo enfoque para resolver o llamada, de la siguiente manera:
<body>
<div id="xbeichen">
click me
</div>
<script>
window.id = "xbeichen.cn";
document.getElementById("xbeichen").onclick = function () {
//var _self = this;
console.log(this.id);
var currentCallback = function () {
console.log(this.id);
};
currentCallback.call(this);
}
</script>
</body>
Además del evento nodo dom anteriormente, una función interna local de este escenario cambiada, también nos encontramos cuando document.getElementById taquigrafía método de este escenario cambiada, por aplicar los métodos para resolver, como sigue:
document.getElementById = (function (func) {
return function () {
return func.apply(document, arguments);
}
})(document.getElementById);
var getId = document.getElementById;
console.log(getId("xbeichen"));2, Function.prototype.bind
La mayoría de los navegadores han incorporado en el método para lograr un Function.prototype.bind utiliza para enlazar este punto, el código es el siguiente:
var myblog1 = {
url: "http://www.xbeichen.cn"
};
var getUrl = function () {
console.log(this.url);
}.bind(myblog1);
getUrl();
El código para enlazar este punto por el método bind (), la salida final es el objeto URL atributo myblog1. Si no se unen a unirse a este punto, que nuestra getUrl () funcionan como una llamada a la función ordinaria, que es un puntero al valor por defecto dentro de este objeto global ventana.
Pero de alguna versión de baja del navegador no se ha implementado el método Function.prototype.bind, por lo que si queremos utilizar este método para bind bind se quejará, esta vez podemos escribir su propio unen una versión simplificada del método, de la siguiente manera:
Function.prototype.bind = function( context ){
var self = this; // 保存原函数
return function(){ // 返回一个新的函数
return self.apply( context, arguments ); // 执行新的函数的时候，会把之前传入的 context
// 当作新函数体内的 this
}
};
var obj = {
name: 'sven'
};
var func = function(){
alert ( this.name ); // 输出：sven
}.bind( obj);
func();En el código anterior, estamos a través Function.prototype.bind a la función func "paquete" y pasar un objeto como un parámetro de contexto, el contexto es que queremos modificar el objeto de este objeto.
Internamente Function.prototype.bind, ponemos una referencia a la función func almacenada y devuelve una nueva función. Cuando llevamos a cabo la función func en el futuro, de hecho, es la primera aplicación de esta nueva función acaba de regresar. Dentro de la nueva función, self.apply (contexto, los argumentos) de este código se ejecuta la función func original y especificar el objeto de contexto para la función func el este cuerpo.
3, prestado otros métodos de objeto
y se aplican métodos de llamadas que no sean el uso de dos o más, hay un tercer propósito que es prestado de otros objetos. Aquí se puede dividir en dos escenarios para informarle sobre:
3.1, para utilizar constructores
Método prestado objetos pidiendo prestado escenario es el constructor, mediante esta técnica, podemos lograr algún efecto similar heredados juntos mirar el código siguiente:
var myblog1 = function (url) {
this.url = url;
};
var myblog2 = function () {
myblog1.apply(this, arguments);
};
myblog2.prototype.getUrl = function () {
return this.url;
};
var testblog = new myblog2("http://www.xbeichen.cn");
console.log(testblog.url);
Lista de parámetros de argumentos 3.2, la función operativa
JS lista de parámetros de función en el objeto argumentos matriz es una clase, sino que también tiene un nivel más bajo, pero es después de todo, no una matriz real, por lo que no se puede ordenar directamente o añadir nuevos elementos como la operación. Esta vez tenemos que pedir prestado método Array.prototype en el objeto de operar los argumentos, por ejemplo: si queremos añadir un nuevo elemento a los argumentos, que puede pedir prestado método Array.prototype objeto push (), de la siguiente manera:
(function () {
Array.prototype.push.call(arguments, 3);
console.log(arguments);
})(1, 2);
De hecho, en el proceso de desarrollo real, si queremos operar argumentos cuando método muy frecuente en el préstamo objeto Array.prototype. Pero al pedir prestado método Array.prototype.push, cualquier objeto no puede pedir, pedir método Array.prototype.push del objeto debe cumplir los dos requisitos siguientes:
- Para el objeto en sí mismo puede acceder atributo;
- longitud propiedad de lectura y escritura del objeto.
Estos son los métodos llaman y se aplican los tres uso más común de la realidad actualmente en desarrollo en la primera y la tercera más común y la segunda es tener en cuenta algunas versiones inferiores del navegador no soporta se introdujo método de enlace.
resumen
Este artículo es otro punto de conocimiento en el primer capítulo "JavaScript orientado a objetos," el artículo sobre la base de la revisión, a través de estos dos artículos, hemos revisado brevemente lo que, se aplica en JS, esto, llamada orientado a objetos estos conocimientos, entonces tenemos un artículo que, finalmente, el cierre de JS y funciones de orden superior hacen alguna opinión conocimientos, que luego comenzó patrones de diseño JS viaje de aprendizaje.
