《JavaScript面向对象编程指南》阅读笔记六

2017-03-15

著作权归该书作者所有。本读书笔记仅供个人记录学习使用，如若侵权，请通知到我，我将立即删除全部内容。

继承的多种方式

题外话：JavaScript没有类的概念，但可以用构造器函数来实现相同的功能。有封装吗？对象本身就包括数据及方法。有聚合吗？一个对象中可以包含其他对象，对象是靠函数来实现的，而函数本身也就是对象。

原型链

每个函数都有一个prototype属性，该属性指向某一个对象。函数被new操作符调用时会创建并返回一个对象，并且该对象中会有一个指向其原型对象的proto，通过该链接可以在新建的对象中调用相关原型对象的属性和方法。

例如对象A的属性中有一个proto隐藏属性，它指向了对象B，B的proto属性指向对象C，直到链条末端的Object对象。
这意义在于：如果某属性不在对象A中而在对象B中，依然可以来访问，这就是继承的作用，能够使每个对象都能访问其继承链上的任何一个属性。


//首先，新建三个构造函数

	function Shape(){
	  this.name = "shape";
	  this.toString = function(){
	     return this.name;
	  };
	}
	
	function TwoDShape(){
	   this.name = "2D Shape"
	}
	
	function Triangle(side,height){
	   this.name = "Triangle";
	   this.side = side;
	   this.height = height;
	   this.getArea = function(){
	     return this.side * this.height /2;
	   };
	}

	//把TwoDShape的prototype属性指向Shape
	TwoDShape.prototype = new Shape();
	//TwoDShape拥有了Shape的name属性和toString方法
	//Shape {name: "shape"}
		//name: "shape"
		//toString: function()
		//__proto__: Object
	
	//把Triangle的prototype属性指向TwoDShape
	Triangle.prototype = new TwoDShape()
	//Triangle拥有了TwoDShape对象从Shape对象继承而来的name属性、toString方法、
	//Shape {name: "2D Shape"}
		//name: "2D Shape"
		//__proto__: Shape
		//name: "shape"
		//toString: function()
		//__proto__: Object

在此，我们将对象直接创建在TwoDShape对象的prototype属性中，并没有拓展这些对象的原有原型。我们用构造器Shape()通过new操作符另新建了一个新对象，然后用它覆盖TwoDshape构造器的prototype属性。

JavaScript没有类的概念，因此我们需要直接用new Shape()构造一个实体，然后才能通过该实体的属性完成继承，而不能直接继承Shape()构造器。

这也确保了在继承实现后，我们对Shape()所进行的任何修改、重写甚至删除，都不会对TwoDShape()产生影响，因为我们所继承的只是由该构造器所建的一个实体。

注意：当我们对对象的prototype属性进行修改时，有可能会对对象constructor属性产生影响，所有，我们在完成继承关系设定后，要对这些对象的constructor属性进行重置

TwoDShape.prototype.constructor = TwoDShape;
Triangle.prototype.constructor = Triangle;


//创建一个Triangle对象，调用它的getArea方法
var my =new Triangle(5,10);
console.log(my);
//Triangle {name: "Triangle", side: 5, height: 10}
	//getArea: function()
	//height: 10
	//name: "Triangle"
	//side: 5
	//__proto__: TwoDShape
		//constructor: function Triangle(side,height)
		//name: "2D Shape"
		//__proto__: Shape
		//constructor: function TwoDShape()
		//name: "shape"
		//toString: function()
		//__proto__: Object

my.getArea()
//25

//尽管Triangle对象没有toString方法，但是它继承了TwoDShape()所继承的Shape()，试着调用一下。
my.toString();
//"Triangle"
//分析：在调用my.toString()时发生了什么：
//首先它会遍历my对象中的所有属性，但没有toString方法，接着再去看my.__proto__所指向的对象，该对象是在继承关系构建过程中由new TwoDShape()所创建的实体。
console.log(my.__proto__)
//TwoDShape {name: "2D Shape"}
//constructor: function Triangle(side,height)
//name: "2D Shape"
//__proto__: Shape	
	//constructor: function TwoDShape()
	//name: "shape"
	//toString: function()
	//__proto__: Object
//显然，在TwoDShape实体中也没有找到toString方法，然后它会继续检查该实体的__proto__属性。这时候，该__proto__属性所指向的实体是由new Shape()所创建的。
console.log(my.__proto__.__proto__)
//Shape {name: "shape"}
//constructor: function TwoDShape()
   //name: "shape"
//toString: function()
//__proto__: Object

//此时，在new Shape()所创建的实体中找到了toString()方法，最后该方法就会在my对象中被调用，并且其this指向my

//如果我们向my对象询问：“您的构造器函数是哪一个？”，它能够给出正确答案，因为我们在构建继承关系时已经对相关的constructor属性进行了重置。
my.constructor
//
function Triangle(side,height){
   this.name = "Triangle";
   this.side = side;
   this.height = height;
   this.getArea = function(){
     return this.side * this.height /2;
   };
}
//通过instanceof操作符可以验证my对象是上述三个构造器函数的实例
//instanceof操作符用来检测一个对象是否是由某指定的构造器函数创建的
my instanceof Triangle
//true
my instanceof TwoDShape
//true
my instanceof Shape
//true

//使用isPrototypeOf()方法检测当前对象是否是另一个对象的原型。
Triangle.prototype.isPrototypeOf(my)
//true
TwoDShape.prototype.isPrototypeOf(my)
//true
Shape.prototype.isPrototypeOf(my)
//true

展开全文 >>

《JavaScript面向对象编程指南》阅读笔记五

2017-03-09

著作权归该书作者所有。本读书笔记仅供个人记录学习使用，如若侵权，请通知到我，我将立即删除全部内容。

原型

原型属性

在JavaScript中，函数本身也是一个包含了属性和方法的对象。（如length和constructor属性，call()和apply()方法），接下来介绍函数对象的另一个属性—prototype

简单地定义一个函数foo()

function foo(a,b){
   return a * b;
}

foo.length
//2

foo.constructor
//Function() { [native code] }

在函数定义时被创建的属性中就包括prototype属性，它的初始化值是一个“空”对象

foo.prototype
//Object {}

typeof foo.prototype
//"object"

还可以自己添加prototype属性

foo.prototype = {};

并且还可以赋予这个空对象一些属性和方法，并且不会对foo函数本身造成影响，因为只有foo()作为构造器使用时，这些属性才会起作用。

利用原型添加属性和方法

定义构造器函数，(如这种方法:)

var sum = new Function('a','b','return a + b;');
sum(1,2);
//3

并用它来新建（构造）函数，这种做法的意图是通过new操作符来调用函数,以达到访问对象this值得目的，然后通过this就可以访问构造器所返回的对象了。这样就有了一种赋予新建对象一定功能（即为其添加属性和方法）的方法。

新建一个构造器函数Gadget()

function Gadget(name ,color){
     this.name = name;
     this.color = color;
     this.whatAreYou = function(){
         return "I am a " + this.color + " " + this.name; 
     }
}

添加属性和方法还有一种方法，即通过构造器函数的prototype属性来增加该构造器所能提供的功能。

Gadget.prototype.price = 100;

Gadget.prototype.rating = 3;

Gadget.prototype.getInfo = function(){
     return "Rating" + this.rating + ", price:" + this.price;
};

如果不想将它它们逐一添加到原型对象上，可以另外定义一个新对象，然后将其覆盖到之前的原型上：

Gadget.prototype = {
    price :100,
    rating : .....
}

使用原型的属性和方法

在向prototype属性中添加完所有属性和方法后，就可直接用该构造器来新建对象了。例如，用构造器Gadget()新建了一个newtoy对象，就可以访问之前定义的那些属性和方法。

var newtoy = new Gadget("webcam","balck");
newtoy.name
//"webcam"
newtoy.color
//"balck"
newtoy.whatAreYou()
//"I am a balck webcam"
newtoy.price
//100
newtoy.rating
//3
newtoy.getInfo()
//"Rating3, price:100"

注意：几乎所有对象都是通过传引用的方式来传递，因此由同一个构造器创建的所有对象的prototype属性也都会同时改变。

自身属性和原型属性

var newtoy = new Gadget("webcam","balck");

当我们访问newtoy的某个属性如newtoy.name时，JavaScript引擎会遍历该对象的所有属性，并找出name属性。如果找到了就会立即返回其值。

newtoy.name  //"webcam"

如果我们访问rating属性会怎么样呢？JavaScript引擎依然会查询newtoy对象的所有属性，但这一次找不到了，脚本引擎接下来就去查询用于创建当前对象的构造器函数的原型（等价于我们直接访问newtoy.constructor.prototype）如果在原型中找到了该属性，就立即使用该属性。

newtoy.rating;
//3
newtoy.constructor === Gadget
//true
newtoy.constructor.prototype.rating;
//3

回顾：每个对象都有一个构造器constructor，而原型prototype本身也是一个对象，这意味着原型prototype它必然也有一个构造器，而这个构造器又会有自己的原型，于是这种结构可能会一直持续下去，并最终取决于原型链的长度，但其最后一环肯定是Object内建对象。

如果试着调用newtoy.toString()，由于newtoy对象及其原型都没有toString()方法，最后只有调用Object对象的toString()方法

newtoy.toString()
//"[object Object]"

通过自身属性重写原型属性

我们知道一个对象自身属性中没有找到指定的属性，就会用原型链中查找到的相关属性。但是，如果遇上对象的自身属性与原型属性同名该怎么办呢？答案是对象自身属性优先级高于原型属性。

function Gadget(name){
   this.name = name;
}
Gadget.prototype.name = "jack"
//新建一个对象并访问其属性
var toy = new Gadget("camera");
//看，自身的属性优先于原型的属性
toy.name
//"camera"
//调用hasOwnProperty()方法判断一个属性是自身属性还是原型属性
toy.hasOwnProperty("name");
//true
//删除自身的属性
delete toy.name
//看，那么属性变成原型的了
toy.name
//"jack"
toy.hasOwnProperty("name")
//false

如何判断一个对象的某个原型属性到底是原型链中哪个原型的属性呢？使用hasOwnProperty()，例如我们想知道toString属性来自哪

toy.toString()
//"[object Object]"
toy.hasOwnProperty("toString")
//false
toy.constructor.hasOwnProperty("toString")
//false
toy.constructor.prototype.hasOwnProperty("toString")
//false
Object.hasOwnProperty("toString")
//false
Object.prototype.hasOwnProperty("toString")
//true

枚举属性

如果想获得某个对象所有属性的列表，可以使用for-in循环。

for循环更适合数组而for-in更适合对象

构造一个URL字符串为例：

var params ={
   productid : 666,
   section : "products"
}
var url = "http://example.org/page.php?" , 
    i ,
    query =[];

for(i in params){
  query.push(i + "=" + params[i]);
}
url += query.join("&");
//"http://example.org/page.php?productid=666&section=products"

isPrototypeOf()方法

新建一个简单的对象monkey：

var monkey ={
	hair: true,
	feeds: "bananas",
	breathes: "air"
}

新建一个Human构造器函数：

function Human(name){
	this.name = name;
}

Human.prototype =monkey

新建一个叫Tim的Human对象，并提问monkey是Tim的原型吗？ture

1
2
3

var Tim = new Human("Tim");
monkey.isPrototypeOf(Tim)
//true

ES5的object.getPrototypeOf()方法

Object.getPrototypeOf(tim).feeds
//"bananas"
Object.getPrototypeOf(tim) === monkey
//true

proto 指向prototype属性，可以用它访问相关原型对象的属性: “xxx.proto.原型的属性”

改写一个用monkey对象做原型的Human()对象构造器

var monkey ={
    hair: true,
    feeds: "bananas",
    breathes: "air"
}
function Human(){};
Human.prototype = monkey;

var developer = new Human()
developer.feeds = "pizza";
developer.hack = "JavaScript"

developer.hack
//"JavaScript"
developer.feeds
//"pizza"

developer中没有breath属性，就得去原型中找，就好像其中有一个神秘的链接或大门通向了相关的原型对象。

developer.breathes
//"air"
developer.__proto__ === monkey
//true

在javascript中，对象中存在一个指向相关原型的链接，这个链接叫做proto属性,proto这个词前后有两条下划线。注意：此属性在IE中不存在

注意：proto与prototype并不是等价的。proto实际上是某个实例对象的属性，而prototype是构造器函数的属性。

typeof developer.__proto__
//"object"
typeof developer.prototype
//"undefined"
typeof developer.constructor.prototype
//"object"

扩展内建对象

在JavaScript中，内建对象的构造器函数（例如Array、String、Object、Function）都是通过其原型来进行扩展。这意味着我们可以做一些事情，例如只要往数组原型中添加新的方法，就可以使其在所有的数组可用。

查询数组中是否存在某个特定的值。实现一个inArray()方法（ES5中有indexOf()方法）


Array.prototype.inArray = function(needle){
   for(var i = 0 , len = this.length; i < len; i++){
      if(this[i] === needle){
         return true;
      }
   }
   return false;
};

var colors = ["red","blue","green","yellow"];
colors.inArray("red")
//true
colors.inArray("black")
//false

给String对象添加一个reverse()方法

1
2
3

String.prototype.reverse = function(){
  return Array.prototype.reverse.apply(this.split("")).join("");
}

这段代码实际上先用split()将目标字符串转换成数组，然后调用该数组的reverse()方法产生一个反向数组，然后通过join()方法将结果转换成字符串。

1 2	"ABCDEFG".reverse() //"GFEDCBA"

这种基于相关内建原型来增加自定义方法这种技术，最常用且最能被接受的例子，是实现让老式浏览器支持新功能。例如让旧版IE支持ES5中的方法。通常把这类扩展叫做shims或polyfills

另外，当你用自定义方法扩展原型时，首先应该检查该方法是否已经存在，避免方法覆盖。

例子:为String对象添加trim()方法，该方法是ES5标准的一部分，但其在老式浏览器中并没有支持:


if(typeof String.prototype.trim !== "function"){
    String.prototype.trim = function(){
       return this.replace(/^\s+|\s+&/g, "" );
    };
}

"hello     ".trim()
//"hello"

原型陷阱

例子：新建一个构造器函数，并用它创建两个对象：


function Dog(){
  this.tail = true;
}
//先创建对象，再给Dog原型添加属性，观察：属性在被添加之前、已存在的对象也可以随时访问后添加的新属性。
var a = new Dog()
var b = new Dog()

Dog.prototype.say = function(){
  		return "Woof!";
}
//成功调用创建对象后才添加的原型的新属性
a.say()
//"Woof!"
b.say()
//"Woof!"	
检查下a、b的对象构造器函数
a.constructor === Dog
//true
//注意！用一个新对象覆盖掉原有的原型对象：
Dog.prototype ={
   paws : 4,
   hair : true
}
此时，a、b的构造器函数还是Dog
a.constructor === Dog
//true
//但是用不了新原型的属性，因为__proto__属性还和原有的原型对象保持联系
a.say()
   //"Woof!"	
typeof a.paws
//"undefined"
typeof a.__proto__.say
//"function"
typeof a.__proto__.paws
//"undefined"
//新建一个新对象
var c = new Dog()
//c可以调用新原型的属性
c.paws
//4
//c不能调用原有的原型的属性，__proto__属性指向了新的prototype对象
typeof c.__proto__.say
//"undefined"
typeof c.__proto__.paws
//"number"
//c的构造器函数本该是dog，但是却指向了Object
c.constructor
//Object() { [native code] }
//`我们可以重新设置constructor属性来解决这些异常`

展开全文 >>

《JavaScript面向对象编程指南》阅读笔记四

2017-03-05

著作权归该书作者所有。本读书笔记仅供个人记录学习使用，如若侵权，请通知到我，我将立即删除全部内容。

对象

instanceof 操作符

通过instanceof操作符可以测试一个对象是不是由某个指定的构造器函数所创建的。

function Hero(){};
var h = new Hero();
var o = {};
h instanceof Hero;
//true
h instanceof Object;
//true
o instanceof Object;
//true

传递对象

当拷贝某个对象或将它传递给某个对象时，传递的是该对象的引用。因此，在引用上所做的任何改动，都会影响它所引用的原对象。

var original = {howmany:1};
var mycopy = original;
mycopy.howmany;
//1
mycopy.howmany = 100;
original.howmany;
//100

比较对象

当对对象进行比较操作时，当且仅当两个引用都指向同一个对象时，结果为ture。如果是不同的对象，即使它们有相同的属性和方法，比较操作也会返回false。

var fido = {breed : "dog"};
var benji = {breed : "dog" };

fido === benji
//false

但是，新建一个变量并被其中一个赋值，该变量就会指向同一个对象，操作符会返回ture。

var mydog = benjil
mydog === benji;
//ture

Object

Object是JavaScript中所有对象的父级对象，

var o = {};
o.toString();
//"[object Object]"

空对象包含一些继承自Object的属性和方法    
·o.constructor : 返回构造器函数的引用
 .o.toString : 返回对象的描述字符串
 .o.valueOf() : 返回对象的单值描述信息。

call()与apply()

让一个对象去“借用”另一个对象的方法并为自己所用。

定义一个some_obj对象，该对象中有一个say()方法：

var some_obj = {
  name : "Bob",
  say : function(who){
     return "Hi " + who + ", I am a " + this.name;
  }
}

调用say()方法，并在其中使用this.name来访问其name属性

some_obj.say("Alice")
//"Hi Alice, I am a Bob"

新建一个my_obj对象，他只有一个name属性：

var my_obj = {name : "Tim"}

some_boj的say()方法也适用于my_obj，因此我们希望将该方法当作my_obj自身的方法来调用。使用say()函数中的对象方法call():

some_obj.say.call(my_obj,"Dude")
//"Hi Dude, I am a Tim"

在此处调用方法时传入了两个参数：对象my_obj和字符串”Dude”，实际上是通过call的首参数修改了对象函数的this值。

apply()与call()基本相同，不同之处是参数不同。apply的参数是通过一个数组来传递。

some_obj.say.call(my_obj,"Dude")
some_obj.say.apply(my_obj,["Dude"])

arguments对象

尽管arguments看上去像一个数组，但实际上是一个类似数组的对象。它和数组相似是因为其中包含索引元素和length属性。但它没有sort()、slice()这样的数组方法。

可以将arguments转换成数组，这样就可以使用数组方法了。

function f(){
   //新建一个空数组[]，使用slice方法。
   var args = [].slice.call(arguments);
   return args.reverse(); 
}
f(1,2,3,4)
//[4, 3, 2, 1]

如何区分数组和arguments对象？，使用Object对象的toString()方法，该方法会返回所创建对象的内部类名。

Object.prototype.toString.call({})
"[object Object]"

Object.prototype.toString.call([])
"[object Array]"

String对象的一些方法

var s = new String("Couch potato");
s.toUpperCase()
//"COUCH POTATO"
s.toLowerCase()
//"couch potato"
s.charAt(0) 返回指定位置的字符
//"C"
s.charAt(100)若指定位置并不存在，返回一个空字符串
//""
s.indexOf("u")匹配字符串的索引，返回其索引值
//2
s.indexOf("o",2)指定一个参数，找到字符串中“第2个o”的索引
//7
s.toLowerCase().indexOf("couch") 
//0 注意返回的索引值是0，说明字符串的匹配部分是从0处开始的，这可能会给if语句的使用带来混淆。当我们像下面这样使用if语句，就会将索引值0隐式地转换为false。
if(s.toLowerCase().indexOf("couch") ){......}

正确的做法：使用if语句检测一个字符串中是否包含另一个字符串时，可以用数字-1来做indexOf()结果的比较
if(s.indexOf("Couch") !== -1){.....}

s.slice(1,5)
//"ouch"
s.substring(1,5)
//"ouch"

slice()和substring（）方法都用于返回目标字符串中指定的区间：但区别在于对负值参数的处理。

substring()方法将负值视为0，而slice()方法则会将它与字符串的长度相加

s.slice(1,-1)  //== slice(1,s.length-1)
//"ouch potat"  
s.substring(1,-1) //==substring(1,0)
//"C"

split() 根据传递的分隔字符串，将目标分割成一个数组。

var s = new String("Couch potato");
s.split(" ")
//["Couch", "potato"]

join()将数组合并成字符串

s.split(" ").join(" ");
//"Couch potato"

concat()用于合并字符串，和+操作符相似

s.concat("es")
//"Couch potatoes"

展开全文 >>