<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">-->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>【第一章】灵活的语言-javascript</title>
<style>
section{
overflow: hidden;
background-color:
margin-bottom: 12px;
}
</style>
</head>
<body>
<section class="part01">
<h3>01，呀！我被覆盖了</h3>
<button onclick="checkEmail()">检查邮箱地址</button>
<button onclick="checkLogin()">检查登录</button>
<button onclick="checkPassword()">检查密码</button>
<p id="s01_con"></p>
<script>
var con = document.querySelector('#s01_con');
function checkEmail(){
con.innerHTML = 'this is a method for checkEmail';
}
function checkLogin(){
con.innerHTML = 'this is a method for checkLogin';
}
function checkPassword() {
con.innerHTML = 'this is a method for checkPassword';
}
</script>
<script>
function checkPassword(){
con.innerHTML = '我是另外的开发人员，我把checkPassword方法覆盖了';
}
</script>
</section>
<section class="part02">
<h3>02，函数？ 全局变量啊。</h3>
<button onclick="testCover()">验证是否相等</button>
<p id="p02"></p>
<script>
var p02 = document.querySelector('#p02');
function testCover(){
p02.innerHTML = '没有被覆盖';
}
var testCover = function(){
p02.innerHTML = '被覆盖了';
}
</script>
</section>
<section class="part03">
<h3>03，对象有啥优点？</h3>
<button onclick="object01.showEmail()">展示对象一的邮箱</button>
<button onclick="object02.showEmail()">展示对象一的邮箱</button>
<p id="p03"></p>
<script>
var p03 = document.querySelector('#p03');
var object01= {
showEmail(){
p03.innerHTML = 'object01@sina.com';
}
};
var object02= {
showEmail(){
p03.innerHTML = 'object02@sina.com';
}
};
</script>
</section>
<section class="part04">
<h3>04，实例方法，不能复制</h3>
<button onclick="TestNew.showPhone()">留个电话吧！</button>
<button onclick="TestNew.showEmail()">邮箱多少？</button>
<button onclick="testNewShowPhone()">留个新实例的电话吧！</button>
<p id="p04"></p>
<script>
var p04 = document.querySelector('#p04');
var TestNew = function(){};
TestNew.showPhone = function(){
p04.innerHTML = '新对象电话';
};
TestNew.showEmail = function(){
p04.innerHTML = '新对象邮箱';
};
var testNew01 = new TestNew();
function testNewShowPhone(){
try{
testNew01.showPhone()
}catch(err){
console.log(err);
p04.innerHTML = err;
}
}
</script>
</section>
<section class="part05">
<h3>05，真假对象</h3>
<button onclick="f.showInfo()">假对象.showInfo</button>
<button onclick="True.showInfo()">真对象.showInfo</button>
<button onclick="checkTrueOrFalse()">检测真假对象</button>
<p id="p05"></p>
<script>
var p05 = document.querySelector('#p05');
function True(){
var a = 1;
return {
showInfo(){
p05.innerHTML = 1;
}
}
}
var f = True();
function checkTrueOrFalse(){
p05.innerHTML = (f instanceof True);
}
</script>
</section>
<section class="part06">
<h3>06，类</h3>
<button onclick="tc.showName()">What is your name？</button>
<button onclick="tc.showAge()">How old are you？</button>
<p id="p06"></p>
<script>
var p06 = document.querySelector('#p06');
function TestClass(){
this.name = 'dean';
this.age = 30
this.showName = function(){
p06.innerHTML = 'my name is ' + this.name + '.';
};
this.showAge = function(){
p06.innerHTML = 'I was born '+ this.age +' years ago.';
}
// 实际上是将实例的__proto__私有属性指向构造函数原型的一个过程
console.log(this.__proto__ === TestClass.prototype);
console.log(this.__proto__);
}
var tc = new TestClass();
</script>
</section>
<section class="part07">
<h3>07，这是本书，拿来就用吧，不用自己学</h3>
<button onclick="tc2.showPublicMethods()">列出一下共用方法吧</button>
<button onclick="clearHTML(p07)">清空</button>
<p id="p07"></p>
<script>
// 共用方法如果不绑定到原型上，就意味着每一个对象都需要重新 " 学习 " 一次，这个 " 学习成本 " 太大了。
var p07 = document.querySelector('#p07');
function TestClass2(){
this.name = 'dean';
this.age = 30;
}
function clearHTML(dom){
dom.innerHTML = '';
}
TestClass2.prototype = {
showName: function(){
p07.innerHTML = 'my name is ' + this.name + '.';
},
showAge: function(){
p07.innerHTML = 'I was born '+ this.age +' years ago.';
},
showPublicMethods: function(){
var proto = TestClass2.prototype;
clearHTML(p07);
for(mName in proto){
// console.log(mName);
var li = document.createElement('li');
li.innerHTML += mName;
p07.appendChild(li);
}
}
};
var tc2 = new TestClass2();
</script>
</section>
<section class="part08">
<h3>08，铁链公主</h3>
<button onclick="ic.translateIronChain()">翻译一下“铁链”吧！</button>
<p id="p08"></p>
<script>
var p08 = document.querySelector('#p08');
function IronChain(){
this.iron = 'iron ';
this.chain = 'chain';
this.translateIronChain = function(){
this.showIron().showChain(); // 链式
};
}
IronChain.prototype = {
showIron: function(){
p08.innerHTML += this.iron;
return this;
},
showChain: function(){
p08.innerHTML += this.chain;
return this;
}
};
var ic = new IronChain();
</script>
</section>
<section class="part09">
<h3>09，addMethod</h3>
<button onclick="am.showName()">测试展示姓名</button>
<button onclick="am.showAge()">测试展示年龄</button>
<button onclick="testCoverMethod()">测试覆盖</button>
<p id="p09"></p>
<script>
var p09 = document.querySelector('#p09');
Function.prototype.addMethod = function(name, fn){
this.prototype[name] = fn;
return this;
};
Function.prototype.addMethods = function(option){
for(var name in option){
this.addMethod(name, option[name]);
}
};
function AddMethod(){
this.name = '测试一下是否能添加showName方法';
this.age = '测试多方法添加';
this.job = '开发人员';
}
// 配置项
var opt = {
showName: function(){
p09.innerHTML = this.name;
},
showAge: function(){
p09.innerHTML = this.age;
}
};
// 方法添加
AddMethod.addMethods(opt);
var am = new AddMethod();
// 测试一下覆盖
function testCoverMethod(){
AddMethod.addMethods({
showName: function(){
p09.innerHTML = '测试覆盖名字';
},
showAge: function(){
p09.innerHTML = '测试覆盖年龄';
},
showJob: function(){
p09.innerHTML = '测试添加显示工作';
}
});
}
</script>
</section>
<section class="part010">
<h3>10，又想有私用的，又想用公用的，好贪心啊</h3>
<button onclick="testC.showName()">展示姓名</button>
<button onclick="addPrivate()">同名方法换成构造函数私有</button>
<p id="p010"></p>
<script>
var p010 = document.querySelector('#p010');
Function.prototype.addMethod = function(name, fn, flag){
flag = flag || true;
if(!flag){
this[name] = fn;
}else{
this.prototype[name] = fn;
}
return this;
};
function TestConstructor(){
this.name = '用的是原型方法';
this.privateName = '用的是私有方法，（私有方法有的时候原型方法是调用不到的）';
}
TestConstructor.addMethod('showName',function(){
p010.innerHTML = this.name;
});
var testC = new TestConstructor();
function addPrivate(){
TestConstructor.addMethod('showName',function(){
p010.innerHTML = this.privateName;
}, false);
}
</script>
</section>
</body>
</html>
