《深入理解JavaScript》—— 对象与继承(第1层)

导读:JavaScript中的面向对象编程(OOP)分为如下几层:

第1层: 单一对象的面向对象

第2层: 对象间的原型链

第3层: 作为实例工厂的构造函数,类似于其他语言中的类

第4层: 子类,通过继承已有的构造函数,创建新的构造函数

每一层都依赖于前一层,可以让你循序渐进的学习JavaScript OOP。第1层和第2层构成了基本的核心,当你对更复杂的第3层和第4层感到困惑时,可以随时回顾参考前两层。

(1) 第1层: 单一对象

笼统的说,JavaScript中所有的对象都是从字符串(string)到值(value)的映射。一个对象中的某一项(键、值)成为属性。属性的键(key)始终是文本字符串。属性的值(value)可以是任意JavaScript值,包括函数。方法是值为函数的属性。

1. 属性的种类

属性可以分为3种。

① 属性(property): 对象中的普通属性(即从字符串的键到值得映射),包括方法(method)被称为数据属性。这是目前为止最常见的属性类型。

② 访问器(Accessor): 访问器是类似于读、写属性的特殊方法。属性的值存储在普通属性中,而访问器可以计算属性的值。你可以把它们看做是虚拟的属性。

③ 内置属性(Internal property): 只存在于ECMAScript语言规范中。它们不能用JavaScript直接访问,但也许可以用间接的方式访问。规范将内置属性的键置于方括号中。例如[[Propertype]]持有一个对象的原型,并可以通过Object.getPrototypeOf()来访问。

2. 对象字面量

JavaScript的对象字面量可以直接创建简单对象(Object的直接实例)。下面是个例子:

var jane = {
    name : 'jane',
    describe : function () {
        return 'Person named ' + this.name;
    }
};

在方法中使用this来指代当前对象(也被称为方法调用的接受者)。

3. 点运算符(.): 通过固定键值访问属性

点操作符提供了一种简洁的语法访问属性。如果你想使用任意的名称啦读写属性,那么需要使用中括号操作符([])。

获取属性:

jane.name;

获取一个不存在的属性时会返回undefined。

获取方法:

jane.describe();

设置属性:

jane.first_name = 'Tom';

注:如果一个属性不存在时,那么会自动创建该属性;如果存在这个属性,那么就改变它的值。

删除属性:

通过delete操作符允许你从一个对象中完全移除一个属性(整个键-值对)。而这种删除只影响一个对象的直接属性,而不涉及它的原型。

4. 特殊的属性键

虽然你不能使用保留字作为变量名,但是你可以用它们作为属性的键。

在对象字面量中,你可以使用数字作为属性的键,但它们会被解析为字符串。

当然你也可以使用任意字符串来作为键,但是你必须加上引号,例如这样的:

var obj = {
    'I am Luo' : 'haoran'  
};

(2) this作为函数和方法的隐式参数

当你调用一个函数时,this总是作为一个(隐式)参数。

1. 宽松模式中的普通函数

尽管普通函数中的this没有实际用处,但它仍能作为一个特殊的变量存在,它的值总是指向全局对象。

2. 严格模式中的普通函数

this总是undefined。

3. 方法

this总是指向调用方法的对象。

(3) 在调用函数时设置this:call(),apply(),bind()

记住,函数也是对象。因此,每隔函数都有自己的方法。

① Function.prototype.call(thisValue,arg1?,arg2?,...)

第一个参数会赋值给被调用函数内的this;剩下的参量作为参数传入被调函数。

② Function.prototype.apply(thisValue,argArray)

第一个参数会赋值给被调函数内的this;第二个参数是一个数组,为被调用函数提供参数。

③ Function.prototype.bind(thisValue,arg1?,...,argN?)

这个方法展示了偏函数应用——意味着它创建了一个新的函数,并用接下来的方式调用bind()的接受者:this的值是thisValue,参数从arg1到argN,紧随其后的是新函数的参数。换句话说,当调用原来的函数时,新函数将其参数追加到arg1,...argN的后面。来看个例子:

function func() {
    console.log('this: ' + this);
    console.log('arguments: ' + Array.prototype.slice.call(arguments));
}
var bound = func.bind('abc',1,2);
bound(4);
// this: abc
// arguments: 1,2,4

关于这几个玩意的具体用法。。能以后用到了再说吧。

原文地址:https://www.cnblogs.com/luohaoran/p/5981657.html