JasmineHua's blog

  • 首页
  • 归档
  • 标签
JasmineHua's blog

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指向对象

阅读全文 »
JasmineHua's blog

javascript中this的指向

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

前言

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

函数调用时的this

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

1
2
3
4
5
6
function f(){
var x = "花";
console.log(this.x); //undefined
console.log(this); //Window
}
f(); //window.f()

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

1
2
3
4
5
6
7
var o = {
x:"花",
m:function(){
console.log(this.x); //花
}
}
o.m();

阅读全文 »
JasmineHua's blog

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 //删除方法

举个例子

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

阅读全文 »
JasmineHua's blog

javascript的类型及类型理解

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

前言

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

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

  1. 原始类型:Number,Boolean,String,Null,Undefined
  2. 对象类型: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:两字符串相等

阅读全文 »
JasmineHua's blog

flex布局实践总结

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

前言

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

flex属性

flex属性可以用来指定可伸缩长度的部件:扩展比率、收缩比率,以及伸缩基准值。当一个元素是伸缩项目时,「flex」属性将代替主轴长度属性决定元素的主轴长度。若元素不是伸缩项目,则「flex」属性没有效果。

  • flex-grow 是扩展比率。默认为0,即如果存在剩余空间,也不放大
  • flex-shrink 是收缩比率。默认为1,即如果空间不足,该项目将缩小
  • flex-basis 伸缩基准值。在分配多余空间之前,项目占据的主轴空间。它的默认值为auto,即项目的本来大小。

flex 的取值是以上三个属性值的组合。flex 的默认值是 0 1 auto。

阅读全文 »
JasmineHua's blog

css布局小结

发表于 2016-02-07 | 分类于 css

前言

因很早之前看过寒冬前辈的一篇博客谈谈面试与面试题 。于是一直想写篇文章将css布局方面的知识总结一下。

position的常见取值与行为

1.static

默认值。静态位置。属于正常文档流。offset属性无作用。

2.relative

相对定位。属于正常文档流。相对于正常流的位置根据offset属性进行偏移(offset值不会影响文档流),所以它原本占据的空间仍存在。

3.absolute

绝对定位。脱离文档流。以第一个position属性值不为static的父类为参考点,若不存在此父类,则以body为参考点,根据offset属性进行偏移(即该元素的containing block)。

4.fixed

固定定位。脱离文档流。以浏览器窗口为定位原点根据offset属性进行偏移。

阅读全文 »
JasmineHua's blog

个人简历

发表于 2016-01-27 | 分类于 myself

个人资料

  • 姓名 - Yuhuahua
  • 性别 - Female ♀
  • 职位 - FE
  • 地点 - Beijing
  • 生日 - 1993
    阅读全文 »
JasmineHua

JasmineHua

江鸡就鸡

7 日志
3 分类
13 标签
GitHub CodePen JSDM
© 2017 JasmineHua
由 Hexo 强力驱动
主题 - NexT.Mist