/*對象索引*/
{
let obj = { name : 'xiaoming', sex:'man'};
Object.create = (o)=>{
let F = function () {};
F.prototype = o;
return new F();
};
let anoter = Object.create(obj);
console.log(typeof anoter.name);//可以索引到原型鏈 string
console.log(obj.hasOwnProperty('name'),anoter.hasOwnProperty('name'));//只索引本身含有的值; true false
/*for in枚舉*/
for(item in anoter)
{
console.log(item);//會枚舉出原型帶有的屬性
}
/*刪除對象屬性*/
anoter.name='xiobai';
console.log(anoter.name);//xiaohong
delete anoter.name;
console.log(anoter.name);//刪除屬性後暴露原型帶有的屬性 xiaoming
}
/*減少全局污染*/
{
var MYAPP={};
MYAPP.stooge={/*最小化全局污染是爲你的應用創建唯一一個全局變量*/}
}
/*js的四種調用模式(決定this的值):1.方法調用2.函數調用3.構造器調用4.apply調用*/
/*方法調用*/
{
let obj={
a:1,
b:function(c){
return this.a+c;
}
};
console.log(obj.b(3));
}
/*函數調用模式*/
{
let obj={value:1};
obj.double=function () {
let that = this;
let helper = function () {
that.value= that.value+that.value; //函數調用this會被綁定到全局對象
};
helper();
};
obj.double();
console.log(obj.value);
/*補充:箭頭函數修正*/
obj.double2=function () {
let helper = ()=> {
this.value= this.value+this.value; //this修正
};
helper();
};
obj.double2();
console.log(obj.value);
}
/*構造器調用*/
{
let Quo = function (name) {
this.name = name;
};
Quo.prototype.get_name= function () {
return this.name;
};
let one = new Quo('小明'); //new調用時,背地創建一個連接該函數的prototype成員的新對象,this則綁定到該對象上
console.log(one.get_name());
}
/*Apply調用模式(傳遞一個數組)*/
{
function add(a,b){
return a+b;
}
let arr=[5,6];
console.log(add.apply(null,arr)); //某種方法賦予到指定對象說,另外call用法相同但傳參爲列舉而非數組
}
/*異常處理*/
{
let sum = function (a,b) {
if(typeof a !== 'number' || typeof b !== 'number'){
throw { //拋出異常對象
name:'TypeError',
message:'a or b much be number'
}
}
return a+b;
};
try{
sum('abc',7)
}catch (e) {
console.log(e);
}
}
/*遞歸 個人舉例:快速排序法*/
{
let sort=(arr,left = 0,right = arr.length-1)=>{
/*關鍵*/
if(left >= right){
return arr
}
//去最後一個數爲基準數
let val = arr[right];
//遍歷判斷
let i=left;
let j=right;
while(i<j){
// 從前往後,比基數大則調換位置
while(arr[i]<val){
i++
}
arr[j] = arr[i];
//從後往前,比基數小則調換位置
while(arr[j]>val){
j--
}
arr[i] = arr[j];
}
//此時 i===j
arr[i] = val;
sort(arr,0,i-1);
sort(arr,i+1,right);
return arr;
};
console.log(sort([0,56,98,12,65,31]));
}
/*作用域*/
//書中JavaScript不支持塊級作用域
//補充:ES6中最新的變量什麼 let和const使得塊級作用域得到修正,在{}內部仍然可以作爲塊級作用域
/*閉包*/
{
var fade = function (node) {
var level = 1;
var step = function () {
var hex = level.toString(16);
node.style.backgroundColor = '#FFFF'+hex+hex; //使用外部變量node
if(level<15)
{
level += 1;
setTimeout(step,100); //再次執行step,step內部函數的外部變量level爲此時的level值,所以level可以逐漸遞增
}
};
setTimeout(step,100);
};
fade(document.body); //調用一次後fade函數已經返回,但由於內部函數的需要,外部變量仍然會繼續保留
}
{
function func() {
let result = [];
let result2 = [];
let result3 = [];
for (var i = 0; i < 10; i++) {
result[i] = function () {
return i;
};
result2[i] = function(num){
return function () {
return num;
}
}(i);
}
for(let j = 0;j<10;j++){
result3[j] = function () {
return j;
};
}
console.log(result[5]()); //由於函數的調用在此處,for語句無塊級作用域導致返回值和預想的不一樣,此時外部變量經過for循環後爲10,所以結果均爲10
console.log(result2[5]()); //解決方法一 : 用匿名函數添加一個閉環境傳入值
console.log(result3[5]()); //解決方法二 : 用ES6語法中let生命變量,是for循環也可以擁有塊級作用域
}
func();
}
/*模塊*/
{} //es6
(function(){}()) //傳統閉包模塊 :一個定義了私有變量和函數的函數,利用閉包創建可以訪問私有變量和函數的特權函數;最後返回這個特權函數或者保存到一個可訪問的地方
/*級聯*/
//如果讓方法的返回值爲this而不是undefined,則可以通過級聯的方式調用同意個對象的很多方法
{
let obj={
name:'ss',
age:18,
getName() {
console.log(this.name);
return this;
},
getAge(){
console.log(this.age);
return this;
}
};
obj.getName().getAge();
}
/*記憶*/
//通過數組或者其他形式存儲結算結果,避免重複不必要的計算
/*繼承*/
{
function People(name,age){
this.name = name;
this.age = age;
}
People.prototype.get_name= function(){
return this.name;
};
let person1= new People('xiaoming',5);
function Person(name,age) {
this.name = name;
this.age = age;
}
Person.prototype= new People(); //繼承People類
Person.prototype.get_age= function(){ //擴充原型方法
return this.age;
};
let person2 = new Person('小紅',5);
console.log(person2.get_name());
console.log(person2.get_age());
}
/*es6 class語法糖繼承對比*/
{
class People {
/*構造器*/
constructor(name,age){
this.name=name;
this.age = age;
}
//方法
get_name(){
return this.name;
}
}
let person1= new People('xiaoming',5);
console.log(person1.get_name());
//開始繼承
class Person extends People{
constructor(name,age){
super(name,age);//必須調用super方法
}
get_msg(){
return super.get_name()+' 年齡:'+this.age.toString(); //調用父類的方法
}
}
let person2=new Person('小紅',80);
console.log(person2.get_msg());
console.log(person2.get_name()); //繼承方法成功
}
/*數組的刪除*/
{
let arr = ['a','b','c','d'];
delete arr[2];
console.log(arr);
arr = ['a','b','c','d'];
arr.splice(2,2,'e','f','g');
console.log(arr);
}
/*正則表達式*/
{
let reg = /^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/;
let result = reg.exec('http://www.baidu.com:80/goodparts?q#fragement');
console.log(result);
console.log(reg.test('http://www.baidu.com:80/goodparts?q#fragement'));
console.log(reg.test('http:////www.baidu.com:80/goodparts?q#fragement'))
}
/*sort方法*/
{
let arr=[12,56,12,56,3,2,15,8,21,32,655,452,'a','aa','bbb'];
console.log(arr.sort(function(a,b){
return a-b;
}))
}
/*Number.toFixed*/
{
let pi = Math.PI;
console.log(pi,pi.toFixed(2),pi.toFixed(15))
/*toString*/
console.log(pi.toString(2));
}
/*毒瘤之自動插入分號*/
{
function func(){
return //這裏自動插入分號導致返回undefined
{
a:'ad'
};
}
console.log(func());
}
/*毒瘤之浮點數*/
{
console.log(0.1+0.2,parseInt(0.1+0.2))
}
/*毒瘤之Nan*/
{
console.log(typeof NaN,NaN===NaN,isNaN('oops'));
let arr = [];
}
/*毒瘤之function語句*/
{
a();
function a(){ //函數聲明提升
console.log("a is running")
}
}
JavaScript語言精粹代碼總結
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.