对JavaScript对象的理解

2018-02-09 12:46:24来源:segmentfault作者:Andy人点击

分享
Javascript
前言:关于javascript我总有些疑问,是不是一门面向对象的语言,总结了很久:Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程(OOP)语言,其实主要是因为它没有提供象抽象、继承、重载等有关面向对象语言的许多功能, 而是把其它语言所创建的复杂对象统一起来,从而形成一个非常强大的对象系统。 这种独特性称它为prototype-basedOO(基于原型的面向对象)。<font color=red>(这是针对ES6以前的标准)</font>

在这篇博客中我引用了阮一峰老师的教程:http://javascript.ruanyifeng.com/oop/basic.html 这个教程讲得十分详细,如果有系统学习的需要,建议跳过我的文章,直接看这里。



js面向对象编程

JavaScript 语言的对象体系,不是基于“类”的,而是基于构造函数(constructor)和原型链(prototype)。

一、JavaScript 语言使用构造函数(constructor)作为对象的模板。


var User = function () {


this.age = 23;
this.name = "wanghaoxin";

};

这是一个构造函数。


构造函数的写法就是一个普通的函数,但是有自己的特征和用法。

函数体内部使用了this关键字,代表了所要生成的对象实例。
生成对象的时候,必需用new命令,调用Vehicle函数。

var user = new User();//这里的等同于var user = new User;
user.age = 123;
console.log(user.age);
console.log(user.name);


执行这段代码结果就是123 、 wanghaoxin,这里的user.age经过了赋值,所以是赋值后的值。


由于js并不是java一样的强类型语言,所以不能再编译前检查你的语法错误,这里有个问题。> 一个很自然的问题是,如果忘了使用new命令,直接调用构造函数会发生什么事?

这种情况下,构造函数就变成了普通函数,并不会生成实例对象。而且由于后面会说到的原因,this这时代表全局对象,将造成一些意想不到的结果。


二、new命令的原理

使用new命令时,它后面的函数调用就不是正常的调用,而是依次执行下面的步骤。


1. 创建一个空对象,作为将要返回的对象实例.
2. 将这个空对象的原型,指向构造函数的prototype属性.
3. 将这个空对象赋值给函数内部的this关键字.
4. 开始执行构造函数内部的代码.

也就是说,构造函数内部,this指的是一个新生成的空对象,所有针对this的操作,都会发生在这个空对象上。构造函数之所以叫“构造函数”,就是说这个函数的目的,就是操作一个空对象(即this对象),将其“构造”为需要的样子。


如果构造函数内部有return语句,而且return后面跟着一个对象,new命令会返回return语句指定的对象;否则,就会不管return语句,返回this对象。


三、使用 Object.create() 创建实例对象

构造函数作为模板,可以生成实例对象。但是,有时只能拿到实例对象,而该对象根本就不是由构造函数生成的,这时可以使用Object.create()方法,直接以某个实例对象作为模板,生成一个新的实例对象。


var person1 = {
name: '张三',
age: 38,
greeting: function() {
console.log('Hi! I/'m ' + this.name + '.');
}
};var person2 = Object.create(person1);person2.name // 张三
person2.greeting() // Hi! I'm 张三.四、javascript使用prototype

JavaScript 的每个对象都继承另一个对象,后者称为“原型”(prototype)对象。null也可以充当原型,区别在于它没有自己的原型对象。JavaScript 继承机制的设计就是,原型的所有属性和方法,都能被子对象共享。


function Animal(name) {
this.name = name;
}Animal.prototype.color = 'white';var cat1 = new Animal('大毛');
var cat2 = new Animal('二毛');cat1.color // 'white'
cat2.color // 'white'

这里的color属性被两个猫共享了。


cat1.color = 'black';cat1.color // 'black'
cat2.color // 'yellow'
Animal.prototype.color // 'yellow';

在这里cat1.color 被赋值为 black ,所以cat1将不再使用原来的原型属性.


prototype对象有一个constructor属性,默认指向prototype对象所在的构造函数。由于constructor属性定义在prototype对象上面,意味着可以被所有实例对象继承。


<font color=blue>构造函数就是普通的函数, 所以实际上所有函数都有prototype属性。</font>

五、_proto_原型链

对象的属性和方法,有可能定义在自身,也有可能定义在它的原型对象。由于原型本身也是对象,又有自己的原型,所以形成了一条原型链(prototype chain)。比如,a对象是b对象的原型,b对象是c对象的原型,以此类推。


如果一层层地上溯,所有对象的原型最终都可以上溯到Object.prototype,即Object构造函数的prototype属性。那么,Object.prototype对象有没有它的原型呢?回答是有的,就是没有任何属性和方法的null对象,而null对象没有自己的原型。


“原型链”的作用是,读取对象的某个属性时,JavaScript 引擎先寻找对象本身的属性,如果找不到,就到它的原型去找,如果还是找不到,就到原型的原型去找。如果直到最顶层的Object.prototype还是找不到,则返回undefined。


如果对象自身和它的原型,都定义了一个同名属性,那么优先读取对象自身的属性,这叫做“覆盖”(overriding)。


Object.prototype.__proto__

根据语言标准,__proto__属性只有浏览器才需要部署,其他环境可以没有这个属性,而且前后的两根下划线,表示它本质是一个内部属性,不应该对使用者暴露。因此,应该尽量少用这个属性,而是用Object.getPrototypeof()(读取)和Object.setPrototypeOf()(设置),进行原型对象的读写操作。


this及this的绑定

this的动态切换,固然为JavaScript创造了巨大的灵活性,但也使得编程变得困难和模糊。有时,需要把this固定下来,避免出现意想不到的情况。JavaScript提供了call、apply、bind这三个方法,来切换/固定this的指向。


this的使用

这个关键字很好的体现了,如果不是面向对象,那为什么使用this呢,其实这个this还真有点不一样,在java中this就是指的本类,那么js中呢?


this永远指向的是最后调用它的对象,也就是看它执行的时候是谁调用的。

所以这里需要注意的问题就是,到底是哪个对象最后调用了this,只有因为this本身指代的就是对象。下面的例子中this的指向变了,变成了谁(谁调用了), 一目了然。


function f() {
return '姓名:'+ this.name;
}var A = {
name: '张三',
describe: f
};var B = {
name: '李四',
describe: f
};A.describe() // "姓名:张三"
B.describe() // "姓名:李四"如果没有对象调用他,默认是用window对象调用的,这也讲得通,因为window是js的顶层对象,所有其他对象都是window的下属对象,JavaScript规定,浏览器环境的所有全局变量,都是window对象的属性。如果一个函数在全局环境中运行,那么this就是指顶层对象。

具体的例子看下面链接,比我写的好,
这里有详细的讲解http://www.cnblogs.com/pssp/p/5216085.html


call的使用

函数实例的call方法,可以指定函数内部this的指向(即函数执行时所在的作用域),然后在所指定的作用域中,调用该函数。call方法的参数,应该是一个对象。如果参数为空、null和undefined,则默认传入全局对象。


var obj = {};var f = function () {
return this;
};f() === this // true
f.call(obj) === obj // true

上面代码中,在全局环境运行函数f时,this指向全局环境;call方法可以改变this的指向,指定this指向对象obj,然后在对象obj的作用域中运行函数f。


var n = 123;
var obj = { n: 456 };function a() {
console.log(this.n);
}a.call() // 123
a.call(null) // 123
a.call(undefined) // 123
a.call(window) // 123
a.call(obj) // 456

上面代码中,a函数中的this关键字,如果指向全局对象,返回结果为123。如果使用call方法将this关键字指向obj对象,返回结果为456。可以看到,如果call方法没有参数,或者参数为null或undefined,则等同于指向全局对象。


function add(a, b) {
return a + b;
}add.call(this, 1, 2) // 3

上面代码中,call方法指定函数add内部的this绑定当前环境(对象),并且参数为1和2,因此函数add运行后得到3。


var obj = {};
obj.hasOwnProperty('toString') // false// 覆盖掉继承的 hasOwnProperty 方法
obj.hasOwnProperty = function () {
return true;
};
obj.hasOwnProperty('toString') // trueObject.prototype.hasOwnProperty.call(obj, 'toString') // false

上面代码中,hasOwnProperty是obj对象继承的方法,如果这个方法一旦被覆盖,就不会得到正确结果。call方法可以解决这个问题,它将hasOwnProperty方法的原始定义放到obj对象上执行,这样无论obj上有没有同名方法,都不会影响结果。


apply的使用

apply方法的作用与call方法类似,也是改变this指向,然后再调用该函数。唯一的区别就是,它接收一个数组作为函数执行时的参数,使用格式如下。


function f(x,y){
console.log(x+y);
}f.call(null,1,1) // 2
f.apply(null,[1,1]) // 2

上面的 f 函数本来接受两个参数,使用apply方法以后,就变成可以接受一个数组作为参数。


绑定回调函数的对象

var o = new Object();
o.f = function () {
console.log(this === o);
}
var f = function (){
o.f.apply(o);
// 或者 o.f.call(o);
};
$('#button').on('click', f);

点击按钮以后,控制台将会显示true。由于apply方法(或者call方法)不仅绑定函数执行时所在的对象,还会立即执行函数,因此不得不把绑定语句写在一个函数体内。更简洁的写法是采用下面介绍的bind方法。


bind的使用

bind方法用于将函数体内的this绑定到某个对象,然后返回一个新函数。


var counter = {
count: 0,
inc: function () {
this.count++;
}
};var func = counter.inc;
func();
counter.count // 0
count // NaN

上面代码中,函数func是在全局环境中运行的,这时inc内部的this指向顶层对象window,所以counter.count是不会变的,反而创建了一个全局变量count。因为window.count原来等于undefined,进行递增运算后undefined++就等于NaN。


为了解决这个问题,可以使用bind方法,将inc内部的this绑定到counter对象。


var func = counter.inc.bind(counter);
func();
counter.count // 1

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台