javascript构造函数

发表于 2016-06-27 | 分类于 javascript

前言

构造函数涉及：构造函数，原型和实例三方面的问题。构造函数是怎么形成的和其行为值得探究。

new

new运算符创建并初始化了一个新的对象。

1	var o = new F()

构造函数构造一个实例时都做了什么？
MDN中的描述是

当代码 new foo(…) 执行时：
1.一个新对象被创建。它继承自foo.prototype.
2.构造函数 foo 被执行。执行的时候，相应的传参会被传入，同时上下文(this)会被指定为这个新实例。new foo 等同于 new foo(), 只能用在不传递任何参数的情况。
3.如果构造函数返回了一个“对象”，那么这个对象会取代整个new出来的结果。如果构造函数没有返回对象，那么new出来的结果为步骤1创建的对象，ps：一般情况下构造函数不返回任何值，不过用户如果想覆盖这个返回值，可以自己选择返回一个普通对象来覆盖。当然，返回数组也会覆盖，因为数组也是对象。

如果用伪函数来写就是

1
2
3

var o = {};                  //创建一个空对象
o.__proto__ = F.prototype    //该对象继承构造函数的原型
F.call(o)                    //将构造函数this指向对象

阅读全文 »

javascript中this的指向

发表于 2016-06-24 | 分类于 javascript

前言

JavaScript的函数存在定义时上下文和运行时上下文以及上下文是可以改变的的概念。所以this的指向是随着它上下文的改变而改变的。

函数调用时的this

this最终指向的是调用它的对象，这里的函数f()实际是被Window对象调用的：

function f(){
    var x = "花";
    console.log(this.x);   //undefined
    console.log(this);     //Window
}
f();                       //window.f()

下面函数是被对象o调用的，所以this指向o；

var o = {
    x:"花",
    m:function(){
        console.log(this.x);  //花
    }
}
o.m();

阅读全文 »

javascript中call，apply，bind的使用方法

发表于 2016-06-20 | 分类于 javascript

前言

call,apply,bind用法十分相似容易混淆。网上文章虽多，但大多晦涩难懂。
在看此篇文章前建议先看另一篇javascript中this的指向，便于对call，apply，bind理解

call()方法和apply()方法

call()和apply()

call()和apply()的第一个实参是要调用函数的母对象，他是调用上下文，在函数体内通过this来获得对它的引用。即call()和apply()的第一个实参都会变为this的值。要想以对象o的方法来调用函数f()：

1 2	f.call(o) f.apply(o)

等价于

1
2
3

o.m = f     //将f储存为o的临时方法
o.m()       //调用这个方法。
delet o.m   //删除方法

举个例子

function f(){return this.x}  //创建函数f
var o = {x:1}                //创建对象o
f.call(o)                    //=> 1:对象o为调用的上下文，函数f内this指向o。
f.apply(o)                   //同上

阅读全文 »

javascript的类型及类型理解

发表于 2016-06-16 | 分类于 javascript

前言

由于之前的一次面试中被问到js有几种类型，我回答了8种，并回答了哪8种。但很显然看对方的表情就知道这不是她想要的答案。回家在整理的时候知道js的类型分为两类：原始类型(primitive type)和对象类型(object type)。于是写了这篇文章做一个总结。

JavaScript原始类型和对象类型有哪些

原始类型：Number,Boolean,String,Null,Undefined

对象类型：Object,Array,Function

不可变的原始值和可变的对象引用

原始值

原始值都是不可更改的：任何方法都无法更改一个原始值。对于数字，布尔值，Null和Undefined来说很显然在被创建出来后是不可改变的，变量只能通过更改指向别的内存空间来改变变量的值。而对于字符串来说就不是那么明显了，因为字符串看起来和数组有很多共通点，我们会认为字符串可以像数组一样通过制定的索引来修改其中的字符。事实上，javascript是禁止这样做的。

1
2
3

var s = 'hello';   //定义一个字符串
s[0] = 1;          //=> 1:为某个索引赋值
s                  //=> "hello":原始字符串并未改变

对于原始值的比较。只要两个原始值相同即相等，如果两个字符串比较，当且仅当他们的长度相等且每个索引字符都相等时，它们相等。

1
2
3

var s1 ＝ '123';   //定义一个字符串s1
var s2 ＝ '123';   //定义一个值与s1都相同的字符串
s1 === s2          //=> true：两字符串相等

阅读全文 »

flex布局实践总结

发表于 2016-06-14 | 分类于 css

前言

之前读完阮一峰的 Flex 布局教程：语法篇与 Flex 布局教程：实例篇后以为自己已经对这个布局算是比较理解，后在实践中倒是踩了不少坑。
接到的需求涉及到的基本上都是flex的弹性布局。也就是flex-grow，flex-shrink，flex-basis。彻底搞明白这三个属性就可以在一条线上随意排了。