JSLearning

JSLearning

标签（空格分隔）： 前端学习

基础

值类型

  • Undefine
  • Null
  • Boolean
  • Number
  • String

引用类型

  • Object

Object支持动态创建属性

var person = new Object(); 
person.name = "Hello JavaScript"; 
alert(person .name);

检测类型

var s = "Nicholas" ;
alert(typeof s); //string
person = new Object ();
alert(person instanceof Object );//true

RegExp

var expression1 = /[bc]at/i
var expression2 = new ReqExp("[bc]at","i");

正则表达式字符串匹配元字符以及已经转义过的字符需要双重转义

元字符:( [ { \ ^ $ | ) ? * + . ] }需要转义成"\\["等
已转义的字符:\n \ 需要转义成"\\n" "\\\\"

Function

函数本质上一个对象，是Function类型的实例。

//函数声明
function sum (num1,num2) {
    return num1 + num2;
}
//函数表达式
var sum = function(num1, num2) {
    return num1 + num2;　
}
var sum = new Function("num1","num2","return num1 + num2");//不推荐
//这三种都是定义一个函数，但是sum可以改变的，仅仅是一个指针

没有重载的概念

函数声明和函数表达式的区别

解析器在加载数据的时候，会率先读取函数声明，并使其在执行任何代码之前可用；治愈函数表达式，则必须等解析器执行到它所在的代码行，才会被真正正确的解释执行。

alert(sum(10,10));
function sum (num1,num2) {
    return num1 + num2;
}
//以上代码ok
alert(sum(10,10));
var sum = function(num1, num2) {
    return num1 + num2;　
}
//以上代码error

函数可以当参数，也可以当返回值

函数的内部属性

*arguments(传入函数的所有参数)
*arguments.callee(正在被执行的函数对象)
*arguments.callee.caller(当前函数的调用方)
*this（执行的环境对象，网页的全局域中调用的时候,this就是window,如果作为一个对象的属性调用，比如o.sum(10,10),this就是o这个对象）

函数属性和方法

*length 参数的数量
*prototype
*call,apply 设定函数的作用域，即this的值
*bind 绑定函数的作用域，即this的值

基本的包装类型

特殊的引用类型
*Boolean
*Number
*String

面向对象基础

对象是无序属性的集合，其属性可以包含基本值、对象或者函数。

//对象定义
var person = {
    name:"Nicholas",
    age:29,
    job:"Software Engineer",
    sayName:function(){
        alert(this.name);
    }
}

数据属性

  1. Configurable:是否可以通过delete删除属性
  2. Enumerable:是否可以通过for-in循环返回属性
  3. Writable:是否可写
  4. Value：属性的数据值

对象直接定义和通过defineProperty定义属性的时候以上的各个值默认值不一样，前者都是true,后者都是false,但value都是undefine。

访问器属性

  1. Configurable
  2. Enumerable
  3. Get 读取属性时调用的函数
  4. Set 写入时调用的函数

对象直接定义和通过defineProperty定义属性的时候以上的各个值默认值不一样，前者都是true,后者都是false,但get & set 都是undefine。

var book = {
    _year:2004,
    edition:1
}
Object.defineProperty(book,"year",{
    get:function(){
        return this._year
    }
    set:function(newValue) {
        
        if (newValue > 2004) {
            
            this.year = newValue;
            this.edition = newValue - 2004; 
        }
    }
});

book.year = 2005;
alert(bool.edition)

读取属性的特性

Object.getOwnPropertyDescriptor

创建对象

工厂模式

function createPerson(name,age,job) {
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function() {
        alert(this.name);
    }
    return o;
}

构造函数模式

function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function() {
        alert(this.name);
    }
}
var person1 = new Person("Greg",27,"Doctor");
//person1会有一个construtor(构造函数)属性 指向Person

使用new加构造函数创建实例会经历以下4个步骤

  1. 创建一个新的对象
  2. 将构造函数的作用域赋给对象(因此this指向了这个新对象)
  3. 执行构造函数中的代码（为这个对象添加属性）
  4. 返回新的对象

对象类型检测

alert(person1 instanceof Person);//true;
alert(person1 instanceof Object);//true

构造函数的问题

属性时函数对象的对象，会重复创建。

原型模式

每个函数都有一个prototype属性，是一个指针，指向一个对象，作用是让实例共享属性和方法。

原型对象的理解

function Person() {
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function() {
    alert(this.name);
}

var person1 = new Person();
person1.sayName();//访问原型对象的
  • Person(函数对象)
  • Peron.prototype(原型对象)
  • person1(实例)

函数对象通过prototype属性访问原型对象，原型对象可以通过constructor对象访问函数对象，实例对象可以通过[[Prototype]]访问原型对象。
每当读取实例的某个属性的时候，都会执行一个搜索，首先搜索实例本身，然后沿着原型链搜索。

原型链：通过[Prototype]]属性连接起来，末端是Object.prototype

调用实例函数的时候，即使这个函数是原型对象定义,函数中的this依然指向当前实例
对象中新增一个和原型对象重名属性时，不会重写原型的值，而是新增一个属性，并屏蔽原型对象的属性
hasOwnProperty()判断某个属性是否是实例属性。
!object.hasOwnProperty(name) && (name in object)判断name是object原型对象的方法

原型的动态性

实例创建后修改原型，也能从实例中反映出来。

组合使用构造函数模式和原型模式

最常用的创建对象的方式

function Person(name,age,job) {
    this.name = name;
    this.age = age;
    this.jog = job;
    this.friends = ["shelby","court"];
}
Person.prototype.sayName = function() {
    alert(this.name);
}
var person1 = new Person("Nicholas",29,"Doctor");
//实例属性在构造函数中定义，所有实例共享原型对象的属性，这个是默认模式

动态原型模式

function Person(name,age,job) {
    this.name = name;
    this.age = age;
    this.jog = job;
    if (typeof this.sayName != "function") {
        Person.prototype.sayName = function() {
            alert(this.name);
        }
    }
}

继承

原型链继承

function SuperType() {
    this.property = true;
}
SuperType.prototype.getSuperValue = function(){
    return this.property;
}

function SubType() {
    this.subProperty = false;
}

//继承了SuperType
SubType.prototype = new SuperType();
//修复constructor
SubType.prototype.constructor = SubType;
SubType.prototype.getSubVale = function() {
    return this.subproperty;
}
var instance = new SubType();
alert(instance.getSuperValue());//true

以上代码最终形成这样的关系

SubType实例 -> SuperType实例(SubType.prototype) -> SuperType.prototype(Object实例) -> Object.prototype
SubType继承SuperType,SuperTyper继承Object

所有类型默认都继承Object类型，原因是默认原型都是Object的实例，指向了Object.prototype。

确定原型和实例的关系

alert(instance instanceof Object);//true
alert(instance instanceof SuperType);//true
alert(instance instanceof SubType);//true

给原型添加新方法，一定要放在替换原型语句之后

单纯的原型链问题：父类如果定义属性，被子类继承的时候，会被各个子类的实例共享，创建子类类型的时候，不能像父类传递属性。

构造函数继承

function SupetType(name) {
    this.name = name;
}

function SubType() {
    //继承了SuperType,同时还传递了参数
    SuperType.call(this,"Nicholas");
    
    //实例属性
    this.age = 29;
}
var instance = new SubType();
alert(instance.name);//Nicholas;
alert(instance.age);//29

借用构造函数的问题:函数属性在构造函数内部定义，无复用，超类型原型中定义的方法，对子类不可见。

组合模式

最常用的继承方式

function SuperType(name) {
    this.name = name;
    this.colors = ["red","blue","green"];
}
SuperType.prototype.sayName = function() {
    alert(this.name);
};

function SubType(name,age) {
    //继承属性
    SuperType.call(this,name);
    //子类属性
    this.age = age;
}

//继承方法
SubType.prototype = new SuperType();
//修正constructor
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function() {
    alert(this.age);
};

var instance1 = new SubType("Nicholas",29);
instance1.colors.push("black");
alert(instance1.colors);//"red,blue,green,black"
instance1.sayName();///Nicholas
instance1.sayAge();//29

var instance2 = new SubType("Greg",27);
alert(instance2.colors);//"red,bule,green"
instance2.sayName();//Greg
instance2.sayAge();//27

浅复制

var person = {
    name:"Nicholas",
    friends:["Shelby","Court","Van"]
}

var anotherPerson = Object.create(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");

var yetAnotherPerson = Object.create(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");

alert(person.friends);//"Shelby,Court,Van,Rob,Barbie"
//覆盖同名属性
var haAnotherPerson = Object.create(person,{
    name:{
        value:"Greg"
    }});
alert(anotherPerson.name);//Greg

//这个函数的作用和Object.create传入一个参数时行为相同
function object(o) {
    function F(){}
    F.prototype = o;
    return new F();
}

寄生组合式继承

最理想的继承范式

function SuperType(name) {
    this.name = name;
    this.colors = ["red","blue","green"];
}
SuperType.prototype.sayName = function() {
    alert(this.name);
};

function SubType(name,age) {
    //继承属性
    SuperType.call(this,name);
    //子类属性
    this.age = age;
}

function object(o) {
    function F(){}
    F.prototype = o;
    return new F();
}

function inheritPrototype(subType,superType) {
    var prototype = object(superType.prototype);
    prototype.constructor = subType;
    subType.prototype = prototype;
}

inheritPrototype(SubType,SuperType);
SubType.prototype.sayAge = function() {
    alert(this.age);
};

var instance1 = new SubType("Nicholas",29);
instance1.colors.push("black");
alert(instance1.colors);//"red,blue,green,black"
instance1.sayName();///Nicholas
instance1.sayAge();//29

var instance2 = new SubType("Greg",27);
alert(instance2.colors);//"red,bule,green"
instance2.sayName();//Greg
instance2.sayAge();//27

函数表达式

//函数声明提升，调用可以放在声明前
sayHi();
function sayHi() {
    alert("Hi!");
}

//函数表达式，错误，函数还不存在
sayHi();
var sayHi = function() {
    alert("Hi!");
}

递归

function factorial(num) {
    if (num <= 1) {
        return 1;
    } else {
        return num * arguments.callee(num-1);
    }
}

//命名函数表达式
var factorial = (function f(num) {
    if (num <= 1) {
        return 1;
    } else {
        return num * f(num-1);
    }
})

闭包

类似于block,定义的时候可以引用外部变量，并持有。

function crateComparisonFunction(propertyName) {
    
    return function(object1,object2) {
        //引用了propertyName
        var value1 = object1[propertyName];
        var value2 = object2[propertyName];
        
        if (value1 < value2) {
            return -1;
        } else if (value1 > value2) {
            return 1;
        } else {u
            retrn 0;
        }
    };
}

闭包和变量

function createFunctions() {
    var result = new Array();
    
    for (var i = 0;i < 10; i++) {
        result[i] = function() {
            return i;
        }
    }
    
    //result数组中 每个函数变量i都是10 不是copy 只是引用
    return result;
}

function createFunctions() {
    
    var result = new Array();
    
    for (var i = 0;i < 10;i++) {
        result[i] = function(num){
            return function() {
                return num;
            }
        }(i);
    }
    
    //result数组中 每个函数的变量num就是从0到9
    return result;
}

关于this

var name = "The Window";

var object = {
    name:"My Object".
    getNameFunc:function() {
        return function() {
            return this.name;
        }
    }
}
alert(object.getNameFunc()());//"The Window";
//这个调用和以上相同 所以this=window.
var f = object.getNameFunc();
alert(f();)

var name = "The Window";

var object = {
    name:"My Object".
    getNameFunc:function() {
        var that = this;
        return function() {
            return that.name;
        }
    }
}
alert(object.getNameFunc()());//"My Object";

内存泄露

function assignHandler() {
    var element = document.getElementById("someElement");
    //循环引用 
    element.onclick = function() {
        alert(element.id);
    }
}

//破除循环引用
function assignHandler() {
    var element = document.getElementById("someElement");
    var id = element.id;
    //循环引用 
    element.onclick = function() {
        alert(id);
    }
    //局部变量设置为null,闭包也不会引用element，就不会循环引用了。
    element = null;
}

闭包会引用包含函数的局部变量，即使没有直接引用局部变量，进而闭包会持有局部变量指向的对象，要破除这种持有，可以将局部变量设置为null在包含函数结束前。

模仿块级作用域

(function() {
    //这里是块级作用域
})();

私有变量

funciton MyOject() {
    //私有变量和私有函数
    var privateVariable = 10;
    
    function privateFunction() {
        return false;
    }
    
    //特权方法
    this.publicMethod = function() {
        privateVariable++;
        return privateFunction();
    }
}
var object = new MyObject();
alert(object.publicMethod);

静态私有变量

(function() {
    
    //私有变量和私有函数
    var privateVariable = 10;
    
    function privateFunction() {
        return false;
    }
    
    //构造函数 未经声明的变量，会创建一个全局变量。
    MyObject = function() {
    
    };
    //公有/特权方法
    MyOject.prototype.publicMethod = function() {
        privateVariable++;
        return privateFunction();
    };
})

模块模式

var singleton = function() {
    //私有变量和函数
    var privateVariable = 10;
    
    function privateFunction() {
        return false;
    }
    
    //公有方法和属性
    return {
        publicProperty:true,
        publicMethod:function() {
            privateVariable++;
            return privateFunction();
        }
    }
}();

增强的模块模式

var singleton = function() {
    //私有变量和函数
    var privateVariable = 10;
    
    function privateFunction() {
        return false;
    }
    //创建对象
    var object = new CustomType();
    
    //添加公有方法和属性
    object.publicProperty = true;
    object.publicMethod = function() {
            privateVariable++;
            return privateFunction();
    };

    return object;
}();
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,457评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,837评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,696评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,183评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,057评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,105评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,520评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,211评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,482评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,574评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,353评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,213评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,576评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,897评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,489评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,683评论 2赞 335

推荐阅读更多精彩内容

  • 6 面向对象的程序设计
    本章内容 理解对象属性 理解并创建对象 理解继承 面向对象语言有一个标志，那就是它们都有类的概念，而通过类可以创建...
    闷油瓶小张阅读 834评论 0赞 1
  • 面向对象：创建对象&继承
    博客内容：什么是面向对象为什么要面向对象面向对象编程的特性和原则理解对象属性创建对象继承 什么是面向对象 面向对象...
    _Dot912阅读 1,391评论 3赞 12
  • 小手
    小小的手 肉肉的小手 柔软的小肉手 当你的手伸向我 当你握住我的手 我的心啊 软软 暖暖 柔柔 像你那小小肉肉的手
    萍梗子阅读 220评论 2赞 3
  • 干了这碗孤独的酒
    不是没有朋友，身边的朋友很多，三五成群，想聚聚，一个电话而已；不是不喜欢热闹，很多人聚在一起多欢乐，欢乐的时光暂且...
    赖上清风阅读 243评论 0赞 0
  • 不要为你的无能找借口
    有些人自己不愿意学习外语，两个还说是爱国，其实没有学习外语的人根本就不是爱国。这只是为你的无能找借口，...
    阡陌望你阅读 490评论 2赞 3