Javascript OOP

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

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

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

Talk is less; show me the code.

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>

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

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

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

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

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

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

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

造函数法构
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();

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

再承谈继
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();

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

就是这 JavaScript 原生链

有一些不完美还
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);

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

个引深（两 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()......

Javascript OOP

More Related Content

Similar to Javascript OOP (20)

Javascript OOP