盘点js基本知识点(一)

知识没人嫌多,当人不断往前走,不断接触新知识,却不经意间遗忘了最基本的东西,不知这算不算是痕迹衰退说的一种体现。有时候我们大部分人就是这样,这也是很多人知其然而不知其所以然的原因。趁着上班的空闲,整理下快淡忘的最基本知识点。

数据类型

在javascript中,数据类型,大致分为两大类: 普通的值类型:undefined string number boolean; 引用类型: Function null Array Object等;
区分值类型,可使用typeof:

console.log(x)-- undefined
console.log(1) -- number

console.log(null) -- object
console.log(function(){}) -- function
console.log(new Number(1)) -- object

可以发现,typeof只能简单区分数据类型,如果需要判断是否为对象,则需要使用instanceof:

var fn = function() {};
console.log(fn instanceof Object) -- true
变量作用域与作用域链

作用域就是控制着变量或函数的可访问范围,在javascript中,变量分为全局作用域和局部作用域。全局变量是指在全局下声明的,在代码中任何地方都能访问到的变量或者未声明变量直接赋值的变量;局部变量是指在函数内部声明的变量,只限于内部访问。
但值得注意的是,当我们取变量值时,应当从创建函数的那个作用域中取值,而不是调用该函数的那个作用域,如:

var a = 8;
function fn() {
    var a = 2;
    return function b() {
        console.log(a)
    }
}
var f1 = fn();
f1()   //  2

那么作用域链又是什么呢。就好比如上面运行f1函数时,从fn中取变量a的值,如果没有,就会往上一层的作用域取,如果还没有就会一直往上一层取值,直到访问全局作用域,其经过的路线就是作用域链。
从作用域链的结构可以看出,在运行期上下文的作用域链中,标识符所在的位置越深,读写速度就会越慢。因此,在编写代码的时候应尽量少使用全局变量,尽可能使用局部变量。

变量声明前置

相信这个坑了不少人。什么是变量声明前置,来个例子:

var a = 8;
function fn() {
    console.log(a);
    var a = 4;
    console.log(a)
}
fn();    // undefined 和 4

为什么第一次a是undefined呢?这是因为再次声明a变量时,a前置了。实际上成了这样:

var a = 8;
function fn() {
    var a;
    console.log(a);
    a = 4;
    console.log(a)
}
fn();  // undefined 和 4

再来个例子:

console.log(fn) // function fn() {console.log(6);}
console.log(b) // undefined
var fn = function() {
    console.log(b);
}
function fn() {
    console.log(6);
}
var b = 5;
fn(); // 5

等等,为什么第一个fn不是undefined呢,第三个打印出来的不是6呢?这就是变量声明前置的导致。事实上应该是这样的:

function fn() {
    console.log(6);
}
var fn
var b;
console.log(fn) // function fn() {console.log(6);}
console.log(b) // undefined
fn = function() {
    console.log(b);
}
b = 5;
fn(); // 5

所谓变量声明前置就是指在一个作用域块中,所有的变量声明全部被放于块的开始那,同时函数的定义会被置于块的最前面。

原型与原型链

一切引用类型变量都是对象,一切对象都是由函数生成,由此可知,对象与函数的关系并非是包含与被包含的关系。可能有人说,var arr = [1, 2, 3] 就不是函数生成的啊,其实,它也是,这只是一种语法糖,其相当于

var arr = new Array();
arr[0] = 1;
arr[1] = 2;
arr[2] = 3;

在javascript中,函数统一会被默认有一个prototype属性,属性值为对象--属性的集合,因此你也可以对函数进行自定义属性。在prototype属性值中,默认会有一个叫做constructor的属性,指向这个函数本身。

function Fn() {
    this.name = "asd";
    this.age = 18;
    Fn.prototype.showName = function() {
        return this.name;
    }
    Fn.prototype.trait = "human";
}
var fn = new Fn();
console.log(fn);

你会发现,通过new实例化的fn对象不但有两个属性,同时还存在一个隐藏属性“__ proto__”。
记住一句话:在javascript中,任何函数都有一个prototype,即原型;任何一个对象都有一个__ proto__,即隐式原型(谨记:函数的原型只能通过构造函数的方式来设置)
对象中的 __ proto__ 指向了创建该对象的函数的prototype。即:fn.__ proto__ === Fn.prototype;
如果函数不是通过构造函数实例化出来的呢?如

function fn() {};
console.log(fn.prototype, fn.__proto__)

你会发现,打印出来的是一个空对象和undefined。其实,自定义函数和var obj = {}一样,都是被Object创建的,所以它的__ proto__指向的是Object.prototype。而不巧的是,Object.prototype是一个特例,它的__ proto__指向的是null。
再看一个例子:

function Fn() {
    this.name = "asd";
    this.age = 18;
    this.sex = "0";
    Fn.prototype.showName = function() {
        return this.name;
    }
    Fn.prototype.trait = "human";
    Fn.prototype.sex = "1";
}
var fn = new Fn();
console.log(fn.sex, fn.trait); // 0 human

fn是Fn函数new出来的对象,fn.sex是fn对象的基本属性,fn.sex为0,这很好理解,那么fn.trait的值又是怎么来的呢?—— 访问一个对象的属性时,会先在对象的基本属性上面查找,如果没有,就会沿着__ proto__这条链向上查找,这就是原型链。

继承

其实,原型链就是一种继承的体现,之所以将原型链与继承分开来讲解,继承比较复杂,实现的方式也比较多,当然优缺点都存在,这里就不一一展开来说,只做简单讲解,毕竟网上对于js的继承方式种类,描述的都相当清楚。
要实现继承,首先得存在一个父类,即构造函数:

// 创建父类Animal
function Animal() {
    // 私有属性
    var a = "属性"; // 私有基本属性
    var b = function() {}; // 私有引用属性(私有函数)

    // 实例属性
    this.name = arguments[0] || "白白"; // 实例基本属性
    this.type = "动物";
    this.showName = function() {
        return this.name;
    }; // 实例引用属性(实例函数)
}

Animal.prototype.types = ["猫", "狗"]; // 原型引用属性
Animal.prototype.showType = function() {
    return arguments[0] || this.type;
}; // 原型引用属性(实例函数)

来个继承的例子:

function Parent() {
    this.arr1 = [10];
    this.arr2 = [12];
}
Parent.prototype.showArr1 = function() {
    return this.arr1;
}
Parent.prototype.addArr1 = function() {
    this.arr1 = this.arr1.concat(arguments[0]);
}
Parent.prototype.showArr2 = function() {
    return this.arr2;
}
Parent.prototype.addArr2 = function() {
    this.arr2 = this.arr2.concat(arguments[0]);
}

function Fn() {
}

Fn.prototype = new Parent();

var f1 = new Fn();
var f2 = new Fn();
f1.arr2.push("fn");
console.log(f1.showArr2(), f2.showArr2()) // [12, "fn"] [12, "fn"]
f1.addArr1("fn");
console.log(f1.showArr1(), f2.showArr1()) // [10, "fn"] [10]

使用两种方法,你会发现,打印出来的结果不一样,为什么会这样呢?首先第一次打印,f1对象是没有arr2属性的,故其需要沿着原型链向上获取该属性,然后进行修改,此时修改的是创建f1的构造函数Fn里面的原型属性,所以f1和f2打印出来的是Fn的原型属性,结果是一样的。
第二次打印是调用addArr1方法,这个方法是Parent的原型方法,原型方法里面涉及到this,指向的是f1对象,故相当于f1添加了个基本属性arr1。因此f1和f2打印出来的不一样。

这种继承方法缺点也是很明显的,就是无法实现多继承,父类的原型属性是所有实例共享的,创建子类实例时,无法向父类构造函数传参。为了解决该缺点,引入了call和apply:

function Parent(arr1, arr2) {
    this.arr1 = arr1 || [10];
    this.arr2 = arr2 || [12];
}
Parent.prototype.showArr1 = function() {
    return this.arr1;
}
Parent.prototype.addArr1 = function() {
    this.arr1 = this.arr1.concat(arguments[0]);
}
Parent.prototype.showArr2 = function() {
    return this.arr2;
}
Parent.prototype.addArr2 = function() {
    this.arr2 = this.arr2.concat(arguments[0]);
}

function Fn() {
    Parent.call(this, [1], [2]);
    <!-- Parent.apply(this, [[1], [2]]); -->
}

var f1 = new Fn();
var f2 = new Fn();

console.log(f1, f2)

好吧,你会发现,解决了上个例子暴露的问题,但又掉入另一个坑...好吧,具体建议还是去看大神整理的文档吧,我对继承也是限于基础😅

闭包

要了解闭包,必须先了解变量的作用域,前面也讲解过变量的作用域与作用域链。父对象的所有变量对子对象都是可见的,可读取的;反之,子对象的所有变量对父对象都是不可见的。而闭包的作用就在这里,它能够在其它函数的外部读取到其内部的变量的函数。
来个例子:

var a = 6;
function fn() {
    var a = 1;
    return function() {
        console.log(++a)
    }
}

var f1 = fn();
f1() // 2
f1() // 3

变量a是函数fn内部的一个变量,每执行一次f1,就会使得a加一,并保留在内存中,不会被Javascript的垃圾回收机制回收。
在闭包中,尤其注重两点:
1.变量取值应当从创建闭包函数的那个作用域中取值,而不是调用该函数的那个作用域。
2.谨慎处理this的指向对象

var obj = {
    fun: function() {
        console.log(this)
        return function() {
            console.log(this)
        }
    }
}
obj.fun();
var fun = obj.fun;
fun();
obj.fun()();

你猜分别打印什么?

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容