javascript高级知识分析——实例化
代码信息来自于http://ejohn.org/apps/learn/。
new做了什么?
function Ninja(){
this.name = "Ninja";
}
var ninjaA = Ninja();
console.log( ninjaA, "undefined,ninja并不是实例化" );
var ninjaB = new Ninja();
console.log( ninjaB.name == "Ninja", "true,在实例化里存在name属性" )
对一个函数进行new操作,这就是实例化。
上述代码的流程为,创造一个临时对象,继承Ninja.prototype对象,执行函数Ninja,一开始将上下文this设置为临时对象。没有return语句,返回这个临时对象。
我们的上下文this指向实例化对象
function Ninja(){
this.swung = false;
// Should return true
this.swingSword = function(){
this.swung = !this.swung;
return this.swung;
};
}
var ninja = new Ninja();
console.log( ninja.swingSword(), "调用实例对象方法" );
console.log( ninja.swung, "引用实例对象属性" );
var ninjaB = new Ninja();
console.log( !ninjaB.swung, "确定this引用的属性是实例化对象的属性,实例化对象彼此不影响." );
习题:增加一个方法,可以给ninja一个name属性
function Ninja(name){
//补足
}
var ninja = new Ninja("John");
console.log( ninja.name == "John", "在初始化时name属性就被设置" );
ninja.changeName("Bob");
console.log( ninja.name == "Bob", "name值成功修改" );
向实例化对象增加一个新的属性和方法
function Ninja(name){
this.changeName = function(name){
this.name = name;
}
this.changeName(name)
}
var ninja = new Ninja("John");
console.log( ninja.name == "John", "在初始化时name属性就被设置" );
ninja.changeName("Bob");
console.log( ninja.name == "Bob", "name值成功修改" );
当没有使用new时会发生什么?
function User(first, last){
this.name = first + " " + last;
}
var user = User("John", "Resig");
console.log( typeof user == "undefined", "因为没有new,所以User作一般函数调用,没有返回值" );
function User(first, last){
this.name = first + " " + last;
}
window.name = "Resig";
var user = User("John", name);
console.log( name == "John Resig", "全局属性被覆盖" );
当没有new时,它其实就是一般的函数调用,遵循函数调用的本质。
确保在错误的情况下仍然使用对象实例化
function User(first, last){
if ( !(this instanceof User) )
return new User(first, last);
this.name = first + " " + last;
}
var name = "Resig";
var user = User("John", name);
console.log( user, "即使没有使用new,仍然可以正确实例化" );
console.log( name == "Resig", "实例化属性正常" );
通过判断this不是构造函数User的实例化对象,重新实例化,这是一个可以不使用new进行实例化的技巧。
习题:有没有更加基因化的方法做同样的事情?
function User(first, last){
if ( !(this instanceof ___) )
return new User(first, last);
this.name = first + " " + last;
}
var name = "Resig";
var user = User("John", name);
console.log( user, "即使没有使用new,仍然可以正确实例化" );
console.log( name == "Resig", "实例化属性正常" );
用arguments.callee实现
function User(first, last){
if ( !(this instanceof ___) )
return new User(first, last);
this.name = first + " " + last;
}
var name = "Resig";
var user = User("John", name);
console.log( user, "即使没有使用new,仍然可以正确实例化" );
console.log( name == "Resig", "实例化属性正常" );
arguments.callee引用的是函数本身。
javascript高级知识分析——实例化的更多相关文章
- javascript高级知识分析——上下文
如果函数是一个对象的属性,那么它可以? var katana = { isSharp: true, use: function(){ this.isSharp = !this.isSharp; } } ...
- javascript高级知识分析——灵活的参数
代码信息来自于http://ejohn.org/apps/learn/. 使用数量可变的参数对编程很有好处 function merge(root){ for(i = 0 ; i < argum ...
- javascript高级知识分析——作为对象的函数
代码信息来自于http://ejohn.org/apps/learn/. 函数和对象是不是非常相似? var obj = {}; var fn = function(){}; console.log( ...
- javascript高级知识分析——函数访问
代码信息来自于http://ejohn.org/apps/learn/. 可以通过函数的名字在它的内部引用它. function yell(n){ return n > 0 ? yell(n-1 ...
- javascript高级知识分析——定义函数
代码信息来自于http://ejohn.org/apps/learn/. 可以使用哪些方式来声明函数? function isNimble(){ return true; } var canFly = ...
- JavaScript的高级知识---词法分析
JavaScript的高级知识---词法分析 词法分析 词法分析方法: js运行前有一个类似编译的过程即词法分析,词法分析主要有三个步骤: 分析参数 再分析变量的声明 分析函数说明 函数在运行的瞬间, ...
- MySQL高级知识(七)——索引面试题分析
前言:该篇随笔通过一些案例,对索引相关的面试题进行分析. 0.准备 #1.创建test表(测试表). drop table if exists test; create table test( id ...
- MySQL高级知识(五)——索引分析
前言:前面已经学习了explain(执行计划)的相关知识,这里利用explain对索引进行优化分析. 0.准备 首先创建三张表:tb_emp(职工表).tb_dept(部门表)和tb_desc(描述表 ...
- 《JavaScript高级程序设计》读书笔记--前言
起因 web编程过程使用javascript时感觉很吃力,效率很低.根本原因在于对javascript整个知识体系不熟,看来需要找些书脑补一下,同时欢迎众网友监督. 大神推荐书籍 看了博客大神们推荐的 ...
随机推荐
- Poj 1269 Intersecting Lines_几何模板
#include <iostream> #include <math.h> #include <iomanip> #define eps 1e-8 #define ...
- nginx配置方法
nginx配置的代码: user www www; worker_processes 8; error_log /data111/logs/nginx/nginx-error.log crit; pi ...
- STL map+vector+struct的使用示例
个人编写的小例子,没有注释,刚毕业时作为技术调研随手编写,仅供参考: #include<iostream> #include<map> #include<vector&g ...
- < meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />
目录(?)[-] 1 meta http-equiv X-UA-Compatible content chrome1 1 meta http-equiv X-UA-Compatible cont ...
- HTML需掌握的基础
首先,我们学习web前端开发基础技术需要掌握的是HTML.CSS.JavaScript语言,那么在下先解释一下何为HTML.CSS.JavaScript语言. HTML是网页内容的载体.内容就是网页制 ...
- 浅谈web前端就业的学习路线
初级前端 主要学习三个部分:HTML,CSS,JavaScript 一.html + css部分: 这部分特别简单,到网上搜资料,书籍视频非常多.css中盒子模型,流动,block,inline,层叠 ...
- (七)Android中AIDL的应用与理解
一.跨应用启动Service Intent serviceIntent=new Intent();serviceIntent.setComponent(new ComponentName(" ...
- Jquery库自带的动画效果方法记录
1.显示和隐藏hide()和show() <script type="text/javascript"> $(function() { ...
- C语言预处理指令
C程序的源代码中可包括各种编译指令,这些指令称为预处理命令.虽然它们实际上不是C语言的一部分,但却扩展了C程序设计的环境.本节将介绍如何应用预处理程序和注释简化程序开发过程,并提高程序的可读性.ANS ...
- Qt5 文本编辑
[应用场景]:在编辑框中输入一段文字,用鼠标选取文字,修改工具栏上的字体.字号大小.加粗.斜体等属性,选取的文字即发生相应的变化. 一. 任何一个文本编辑器的程序都要用到QTextEdit ...