五、原型:
1、原型的定义: 原型是function对象的一个属性,它定义了构造函数制造出的对象的公共祖先。通过改构造函数产生的对象,可以继承该原型的属性和方法。原型也是对象。
2、利用原型特点和概念,可以提取共有属性。将一类对象的共有属性提取出来,放到该类对象的原型中,从而不需要每次用new操作符时都重新定义一遍该共有属性。
如下,定义一个Person构造函数,而属于Person多构造对象共有的属性方法,则定义到Person的原型中
Person.prototype = {
eat: function (food){
console.log('I have eated ' + food);
},
sleep:function () {
console.log("I am sleeping");
}
}
// 人的构造函数
function Person (name, age) {
this.name = name;
this.age = age;
}
var person1 = new Person('zsn', 18);
console.log(person1.name);//zsn
person1.eat('apple');//I have eated apple
3、如何查看原型:
之前是不允许我们查看构造函数的原型的,但后来提供了一个可查看构造函数原型的接口:隐士属性__proto__(其实我们能够访问原型的属性,或者说继承原型,靠的就是__proto__属性连接着构造函数和原型,可以说没有__proto__属性的存在,就无法实现原型的继承)
(1)、首先我们先说明一下__proto__这个接口是存放到哪里的
看过以上对象创建过程的都应该知道在用new创建一个对象时,内部会隐士自动创建一个this的对象,进过一系列处理后再隐士将this对象返回。而__proto__就对于隐士创建的this对象中,如下代码:
//原型
Person.prototype = {
eat: function (food){
console.log('I have eated ' + food);
},
sleep:function () {
console.log("I am sleeping");
}
}
// 构造函数
function Person (name) {
//var this = Object.create(Person.prototype);
//p.s.在隐士创建的this对象中存在一个属性,即__proto__,该属性存储了Person.prototype
this.name = name;
// return this;
}
// 对象的创建
var person1 = new Person('zsn');
// 打印原型
console.log(person1.__proto__);
如何查看原型:直接通过new操作符创建的对象访问__proto__属性即可
4、如何查看对象的构造函数,我们通过属性constructor来查看:
contructor属性位于构造函数的原型中,其中存储的是构造函数信息,所以在不知道原型的情况下,由原型继承原理,我们可以用实例对象来直接访问constructor,即获取创建该实例的构造函数
function Person () {
this.name = 'myName';
this.age = 18;
}
var person = new Person();
console.log(person.constructor);// function Perso(){...}
六、原型链:
1、定义:原型链就是将一个个原型串连起来,形成一条原型继承的链子。
2、原型链的构成:
如下代码例子, Child继承Parent, Parent继承GrandParent, 而GrandParent没有自定义原型,所以默认为原型链的最顶端new Object();
(为什么Object为最顶端,因为Object.prototype为null,为null是没有原型的)
// 原型链: Child -> new Parent() -> new GrandParent() -> new Object();
function GrandParent(){
this.name = 'GrandParent';
this.a = 3;
}
Parent.prototype = new GrandParent();
function Parent() {
this.name = 'parent';
this.b = 2;
}
Child.prototype = new Parent();
function Child() {
this.name = 'child';
this.c = 1;
}
var child = new Child();
console.log(child); // Child {name: "child", c: 1}
console.log(child.a); //3
console.log(child.b); //2
console.log(child.c); //1
console.log(child.name); //child
3、原型链的增删改查:
使用如上的原型链说明, Child -> new Parent() -> new GrandParent() -> new Object(), 实例对象为child
(1)、增:
为child实例对象添加属性,总是添加为其自己本身的属性,为对原型和原型链是没有影响的。(再具体说即对和其相同构造函数构造的实例对象无法造成影响,以下说法同此)
(2)、删:
使用delete操作符只能删除child实例对象自己本身的属性,而无法删除由原型继承而来的属性
(3)、改:
分两种情况:
若修改的属性为继承自原型的,且值类型为原始值,则仅仅修改的是该实例对象的属性,对原型无法造成影响。
若修改的属性为继承自原型的,属性值类型为引用值,则对引用值的修改又分两种情况:
第一种是直接对该修改的属性赋值 => 此情况仅仅修改的是实例对象的该属性,无法对原型造成影响。
第二种是对该修改的属性添加内容或去除内容,而不是对其重新赋值 => 此情况会对原型造成影响。如下例子:
Person.prototype = {
has: [1, 2, 3]
}
function Person (){
this.name = 'zsn';
}
var person1 = new Person();
var person2 = new Person();
person1.has.push(4);
// person1 和 person2都改变了,因为person1的修改影响到了原型,进而影响到了另一个实例对象
console.log(child.a); //3
console.log(child.b); //2
七、对象继承史
由于之前已经总结过这些,所以此处直接就粘链接了: http://www.cnblogs.com/Walker-lyl/p/5592048.html
八、命名空间:
我们可以利用对象创建命名空间来管理变量,防止污染全局,适用于模块开发,如下简单的小demo:
var workSpace = {
person1: {
name: 'one',
age: 18
},
person2: {
name: 'two',
age: 20
}
}
// 这样两个人虽然有同名变量,但不会相互影响,因为位于不同命名空间
// 访问第一个人的姓名
console.log(workSpace.person1.name);
console.log(workSpace.person2.name);
九、实现类似jquery中的链式调用: return this;
如下小demo,其中的this不懂的没关系,上面会说,你只要把次demo中的this当成person对象就行
var person = {
foodCount: 10,
eat: function() {
this.foodCount--;
return this;
},
buy: function() {
this.foodCount++;
return this;
},
print: function () {
console.log(this.foodCount);
}
}
// foodCount初始值为10, 在连续吃了三次后,变为7
person.eat().eat().eat();
person.print();
十、对象的枚举:
1.obj.hasOwnProperty('prop');
该方法的作用是来判断对象obj的自身属性中是否含有属性prop,自身属性是在构造函数中生成的或者实例对象后来自己添加的,而继承属性则是从原型上继承的属性,所以该方法就是判断该属性是从原型继承来的还是自身的。
作用: 遍历一个对象的所有自身属性,因为es5中的对象遍历是默认打印包括继承自原型的属性的,demo如下
Person.prototype.age = 18;
function Person () {
this.name = 'lyl';
}
var person = new Person();
// 未用hasOwnProperty
// print:
// lyl
for(var prop in person) {
console.log(person[prop]);
}
// 使用hasOwnProperty
// print:
// 18 lyl
for(var prop in person) {
if(person.hasOwnProperty(prop)) {
console.log(person[prop]);
}
}
2、prop in obj;
in操作符用来判断该对象obj上是否有该属性prop,prop既可以是自身属性,也可以是继承属性,如下demo
Person.prototype.age = 18;
function Person() {
this.name = 'lyl';
}
var person = new Person();
console.log('age' in person); // true
console.log('name' in person); // true
delete person.name;
console.log('name' in person); //false
3、object instanceof Object;
instanceof操作符用来判断object实例对象是否为Object构造函数创建的,如下demo
Person.prototype.age = 18;
function Person() {
this.name = 'lyl';
}
var person = new Person();
console.log(person instanceof Person); // true
console.log(new Object() instanceof Person); //false
十一、this基本介绍:
1、函数预编译过程 this —> window
2、全局作用域里 this —> window
3、obj.func(); func()里面的this指向obj), 可以这样理解,谁调用func,则this就指向谁
4、call/apply 可以改变函数运行时this指向,
(1)、call用法:
func.call(要改变后的this, arg1, arg2, ... );
(2)、apply用法:
func.apply(要改变后的this, [arg1, arg2, arg2]);
(3)、apply和call共同点:都是改变this指向
apply和call不同点:传参形式不同,call是将参数一个个传进来,而apply是将所有参数存进一个数组中,然后将该数组传
如下demo:
// demo1
function demo1(){
console.log(this);
}
// demo1() <==> this.demo1(); <==> window.demo1()
demo1(); // window
// demo2
var demo2 = {
retThis: function(){
console.log(this);
}
}
demo2.retThis(); // demo2 = {...}
// call / apply改变this
demo1.call(demo2); // demo2 = {}
demo2.retThis.call(window); // window
十二、对象的克隆:
你可能回想,直接用等号赋值不久完成克隆了吗?这还用说,但你忽略了对象是一个引用值,赋值操作赋的是该对象的引用,然后会产生很坏的影响。
举例来说,将obj1赋值给obj2,然后我们向obj2中添加了一个属性,然后我们会惊喜的发现obj1中也有了此刚刚向obj2中添加的属性,但我obj1并不需要该属性啊,则造成obj1不开心了,为了让obj1开心起来,我们向下看,嘿嘿:
对象克隆,分为浅克隆和深克隆,而上边的直接赋值的克隆操作为浅克隆,为什么称为浅克隆呢?因为,克隆的和被克隆的对象在克隆操作完成后,指向同一个地址引用,改变其中一个(注意:此处的改变为增加或删除对象的属性,而不是为该对象重新赋值一个对象),另一个也会改变,而深克隆则不会产生此现象。
深克隆/深拷贝code如下,这是我从网上搜到的一个目前我见到的最完整最简短的code,直接贴上:
// 对象的深度克隆(Array / obj /...)
function deepClone(obj) {
var str, retObj = Object.prototype.toString.call(obj) === '[object Array]' ? [] : {};
if(typeof obj !== 'object') {
return;
}else if(window.JSON) {
str = JSON.stringify(obj);
retObj = JSON.parse(str);
}
else {
for(var prop in obj) {
retObj[prop] = typeof obj[prop] === 'object' ? deepClone(obj[prop]) : obj[prop];
}
}
return retObj;
}