JavaScript 实现类的继承

JavaScript 继承 原型继承 构造函数

JavaScript采取原型继承机制,对象直接继承其他对象;在类继承语言中,类继承其他类,对象是类的实例。事实上JavaScript提供了更加丰富的重用机制,可以模仿类继承,也可以支持更加复杂的代码重用模式。本文关注于如何用JavaScript模拟其他语言中的类继承机制。

在传统编程语言中,类继承机制至少提供了两方面的好处:1) 代码重用,只需要编写不同的那部分代码,减少开发成本;2) 引入类型系统,便于编译期类型检查,减少强制转换。

函数式JavaScript编程

JavaScript 函数式编程 级联调用 回调函数 ES6 闭包 柯里化 Lambda Express.js 异步

也许你还觉得函数式编程很陌生,但许多的函数式编程风格已经渐渐开始流行。 比如DOM中常见的回调函数、jQuery的级联写法、 lodash的partial函数、Java的Guava库… 到处都是函数式的编程风格。

啥叫函数式编程?Lisp?事实上只要语言将函数作为一等公民(或者借助工具达到类似效果) 就可以支持函数式编程。而将函数作为一等公民意味着函数可以像变量一样传参、赋值和返回。

JavaScript的作用域与闭包

JavaScript 封装 闭包 作用域 原型继承 变量提升

JavaScript语言提供了函数作用域,同时JavaScript允许嵌套的函数定义。 有趣的是,内部函数(inner function)的生命周期可能超过父级函数。 这时便会显示出JavaScript的一个特殊现象:闭包。 闭包为面向对象编程提供了另外一种有趣的封装方式,我们无需为私有变量声明private

函数作用域

程序设计语言中的作用域(scope)控制着变量和参数的可见性和生命周期。 它的重要性体现在避免命名冲突和自动内存管理两个方面,极大地减少了程序员的工作。

多数编程语言都拥有块作用域(block scope),由一对大括号限定其中变量的作用域。 比如C++的变量只在块内可见,变量被定义时执行内存申请和构造函数, 控制流退出代码块后内部的变量又被析构和内存回收。

不幸的是JavaScript提供了块语法,却不提供块作用域,而是提供函数作用域。 这意味着参数和变量在函数外部不可见,在函数内部始终可见。

JavaScript 方法的 4 种调用方式

JavaScript 原型链 闭包 构造函数 JSON

函数(Function)是JavaScript的基本模块单元,JavaScript的代码重用, 信息隐藏,对象组合等都可以借助函数来实现。 JavaScript中的函数有4种调用模式:

  • 方法调用(Method Invocation Pattern)
  • 函数调用(Function Invocation Pattern)
  • 构造函数调用(Constructor Invocation Pattern)
  • apply调用(Apply Invocation Pattern)

与其他语言不通,JavaScript的函数是一种特殊的对象 (事实上,JavaScript函数是一级对象)。 这意味着函数可以有属性,可以有方法,也可以传参、返回、赋值给变量、加入数组。 与对象不同的是函数可以被调用。

既然是对象便会有原型。我们知道通过花括号语法创建的对象的原型是Object.prototype。 通过函数语法(function关键字或new Function())创建的函数,其原型自然是Function.prototype。 而Function.prototype的原型是Object.prototype

注意上述『原型』指的是原型链上的隐式原型,区别于prototype原型属性。

细说 JavaScript 的对象

JavaScript 原型链 继承 反射 ES6

JavaScript是面向对象语言,通过原型机制实现继承,通过『闭包』等方式可以实现封装。 本文来探讨JavaScript对象的特殊之处:原型链、引用、反射、属性遍历等特性。

对象创建

JavaScript拥有非常直观的对象创建方式:

var emptyObject = {};
var person = {
    name: 'harttle',
    age: 24
};

相当于:

var xx = new Object(); 
xx.name = 'hartle'; 
xx.age = 24;

属性访问

属性可以通过两种语法访问:

  • person.age
  • person['age']

当属性名不存在时JavaScript会沿着原型链去查找。 赋值可以更新或创建一个属性,属性可以通过delete person.age来删除。

undefined获取属性会引发TypeError,一般通过&&来解决:

// person.girl === undefined
person.girl.name;                // TypeError
person.girl && person.girl.name; // undefined

利用浮动和清除浮动进行布局

float overflow CSS HTML

CSS有三种基本定位方式:正常流(static),浮动(float),绝对定位(absolute、fixed)。 HTML元素默认采取正常流的方式进行布局,而浮动是HTML布局中最常用的定位方式。 下面先探讨浮动定位的行为,然后介绍一个需要清除浮动的场景,以及几种替代方案。

浮动

浮动元素会向左/右偏移,直至外边界碰到容器或另一个元素的边缘。 浮动会使得元素脱离文档流,后面元素进行布局时,前面的浮动元素就像不存在一样。

float right

如果右侧没有足够空间,浮动元素就会下坠,直到有足够的空间(折行)。 如果浮动元素有着不同的高度,那么可能在下坠过程中卡在某个位置。

get-stuck

CSS 外边距合并

CSS HTML inline-block

外边距合并是CSS中一个特殊的概念。当两个外边距相邻时,它们会合并为较大的那一个。 无论是相邻元素的上下边距,还是父子元素的上边距,甚至是同一元素的上下边距。

相邻元素

当两个元素上下相邻时,上面的下外边距会与下面元素的上外边距会合并。

contain@2x

如果元素左右相邻呢?一个典型的场景是几个inline-block元素并排显示。 但inline-block元素的外边距是不合并的,它们会保持自己的间隔。

inline-block的上下外边距仍然是不起作用的,因为它们是行内元素呀!

导航: 上一页 下一页

加载中...

🔝