本文件探讨了JavaScript的各种主题，包括其原生特性、面向对象编程(OOP)的实现方式及其在前后端开发中的应用。文中详细介绍了JavaScript的基本数据类型，以及通过构造函数和原型实现继承的方法。此外，还提及了JavaScript在服务器端的作用和其在现代Web开发中的重要性，尤其是在与Node.js的结合使用上。

1. 波公司驰 2015 年度技 交流沙 ——术 龙
JavaScript 大 之路师
JavaScript 原生 的研究与 承模式 践链 继 实

2. • CJDP3 框架解析及改 思路进
• 一的统 实时 / 批量数据采集平台研究
• 基于用 活定制的 表技 分析及 用研究户灵 报 术 应
• 数据可 化技 在支付系 中的 用视 术 统 应
• 互 网行 的技 点联 业 术热 纵览
• JavaScript 程深入编
• web 新 ：基于开发 趋势 JavaScript 的 web 服
务

3. Original Regression
• 于后端工程 。。。对 师
• 于前端工程 。。。对 师
• 于人力部和 合部的同事？？？对 综

4. Talk is less; show me the code.

5. document.body.innerHTML = '<div id="div1">CMB</div><div
id="div2">ICBC</div><div id="div3">BBC</div><div
id="div4">ABC</div>';
for (var i = 4; i >= 1; i--) {
document.getElementById('div' + i).
addEventListener('click', function(){
alert(i);
});
}
for (var i = 4; i >= 1; i--) {
!function(i){
document.getElementById('div' + i).
addEventListener('click', function(){
alert(i);
});
}(i);
}

6. Why JavaScript ？

7. JavaScript is ......
<div id="div1">
<input type="button" onclick="append_p()">
<p id="p2"> 是一个段落这 </p>
</div>
<script>
function append_p(){
var para=document.createElement("p");
var node=document.createTextNode(" 是新段落。这 ");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
}
</script>

8. JavaScript is ......
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello Worldn');
}).listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');

9. Why JavaScript ？
• HTML5 和 JavaScript 在 器端首屈一指浏览
。
– Where is Flash ， Sliverlight and Java FX ？
• JavaScript 在服 器端也有一席之地。务
– NodeJS ，事件 、 非阻塞驱动 I/O 模型

10. JavaScript OOP

11. 封装 承继 多态

12. Java Code
public class Person{
private String firstname, lastname;
Person(String firstname, String lastname){
this.firstname = firstname;
this.lastname = lastname;
}
public String getName(){
return this.firstname + this.lastname;
}
static void walking(){
Systems.out.print("I am working");
}
}
......
Person p = new Person("Rex","Gao");
String fullname = p.getName();
Person.walking();

13. JavaScript 原始类型
• number
• string
• boolean
• null
• undefined
• Object
– function
– array
– date

14. JavaScript Solution
var Person = {
firstname : "first",
lastname : "last",
getname : function(){
return this.firstname + this.lastname;
},
walking : function(){
console.log("I am walking");
}
};
......
Person.firstname = 'Rex';
Person.lastname = 'Gao';
var fullname = Person.getname();
console.log(fullname);
Person.walking();

15. Has it been done?
• 可是 ......
– 象的事例 ？对 呢 new Person1 ， Person2
– 承 ？继 呢 Student 类， Teacher 类
– 多 ？ 重态呢 载 getName 函数
– 造函数 ？构 呢
– 私有和公有 量 ？变 呢
– 静 量和函数 ？态变 呢
• 怎么破？

16. 承继
var Student = Object.create(Person);
Student.getName = function(){
return "Stu Name: " + this.firstname + this.lastname;
}
Student.doHomework = function(){
console.log("I am doing my homework");
}
var fullname = Student.getName();
console.log(fullname);
Student.walking();
Student.doHomework();

17. 造函数法构
var Person = function(fname,lname,sex){
var firstname = fname;
var lastname = lname;
this.getName = function(){
return firstname + lastname;
}
this.sexual = sex;
Person.prototype.sayHello = function(){
if(this.sexual == "male"){
console.log("Hey, I am a man!")
}else{
console.log("Hi, I am a woman~")
}
}
}
var p = new Person('Rex','Gao','male');
console.log(p.getName());
p.sayHello();

18. P
[Obj]
getName()
sexual
[Person.prototype]
sayHello()
__proto__ __proto__
Object
通过 new 操作符 建一个 象：构 对
A. 建一个新 象创 对
B. 将 造函数的作用域 新 象构 赋给 对
C. 行 造函数中的代执 构 码
D. 返回 个新 象这 对

19. 再 承谈继
var Student= function(fname,lname,sex){
Person.apply(this, arguments);
};
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;
Student.prototype.sayHello = function(){
if(this.sexual == "male"){
console.log("Momoda, I am a boy!")
}else{
console.log("Oba, I am a girl~")
}
}
Student.laugh = function(){
console.log("Hahaha~~");
}
var s = new Student('Rex','Gao','male');
console.log(s.getName());
s.sayHello();
Student.laugh();

20. S
[Obj]
getName()
sexual
[Student.prototype]
sayHello()
__proto__
__proto__
Object
[Person.prototype]
sayHello()
__proto__

21. 就是这 JavaScript 原生链

22. 有一些不完美还
var Teacher= function(fname,lname,sex){
if(!(this instanceof Teacher)){
throw new Error('Do not invoke without new');
}
Person.apply(this, arguments);
};
inherit(Teacher,Person);
function inherit(subClass, superClass){
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
}
Object.freeze(Teacher);
Object.freeze(Teacher.prototype);

23. 然而天地本就不全 ......

24. 个引深（两 jQuery ）
$('#selector').get(0);
var $ = aQuery = function(selector) {
// 强制 象为对
if (!(this instanceof aQuery)) {
return new aQuery(selector);
}
var elem = document.getElementById(/[^#].*/.exec(selector)[0]);
this.length = 1;
this[0] = elem;
this.context = document;
this.selector = selector;
this.get = function(num) {
return this[num];
}
return this;
}
$('selector').each(); $.each();
aQuery.each = aQuery.prototype.each = function()......