JS面向对象整理篇一——基础概念衍生

JS面向对象

oop

  • 继承：实例可以继承A对象中的方法和属性，减少代码冗余

  • 封装：对象把实现过程封装在方法中，调用者可以不需了解过程直接调用

  • 多态：一种事物，可以有多种表现形式

构造函数

是对象的模版

function Person(){
    this.name = 'king';
    var age = 12;   // 私有属性，是指针针对实例而言
    this.say = function() {
        console.log('hi~')
    }
}

对象

  • 普通对象: 没有prototype，有proto
  • 函数对象： 只有函数有prototype属性，所有的对象都有proto隐式属性
  • 实例对象： var son = new Person();

创建对象方式

new运算符

MDN:语法new constructor[([arguments])]，创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例

  • 创建一个空的简单JavaScript对象（即{})
  • 链接该对象（即设置该对象的构造函数）到另一个对象
  • 将步骤1新创建的对象作为this的上下文
  • 如果该函数没有返回对象，则返回this

但实际上new具体做了什么操作

var son = new Person();

当这段代码运行的时候，内部实际上执行的是：

// 创建一个空对象
var other = new Object();
// 将空对象的原型赋值为构造函数的原型
other.__proto__ = Person.prototype;
// 改变this指向
Person.call(other);

最后一步如何理解，当构造函数是否返回对象，可做如下尝试

// 无返回对象时
function Person(name){
    this.name = name;
    this.age = 12;
}
Person.prototype.say = function(){
    console.log('say hi')
}
var son = new Person('king');
console.log(son.name);   // 'king'
console.log(son.say());  // 'say hi'

由此可以得出结论，new通过构造函数Person创造出来的实例son,可以访问Person中的内部属性，以及原型链上的方法，当对构造函数Person如下修改时

// 返回非对象
function Person(name){
    this.name = name;
    this.age = 12;
    return 1
}
Person.prototype.say = function(){
    console.log('say hi')
}
var son = new Person('king');
console.log(son.name);   // 'king'
console.log(son.say());  // 'say hi'

// 返回对象
function Person(name){
    this.name = name;
    this.age = 12;
    return {color: 'red'}
}
Person.prototype.say = function(){
    console.log('say hi')
}
var son = new Person('king');
console.log(son);   // '{color: "red"}'

综上，可以很好理解MDN上关于new操作符的最后一步操作结果

Object.create()

语法：Object.create(proto[, propertiesObject])，创建一个新对象，使用现有的对象来提供新创建的对象的proto

内部实现方式

Object.create =  function (o) {
    // o参数是原型对象，不需要加.prototype
    var F = function () {};
    F.prototype = o;
    return new F();
};

Object.create = function (obj) {
    var B={};
    Object.setPrototypeOf(B,obj); // or  B.__proto__=obj;
    return B;  
};

MDN demo:
const person = {
  isHuman: false,
  printIntroduction: function() {
    console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
  }
};

const me = Object.create(person);

console.log(me): // {}
me.name = 'Matthew'; // "name" is a property set on "me", but not on "person"
me.isHuman = true; // inherited properties can be overwritten

me.printIntroduction();
// expected output: "My name is Matthew. Am I human? true"

第二个参数

//该参数是一个属性描述对象，它所描述的对象属性，会添加到实例对象，作为该对象自身的属性。
var obj = Object.create({}, {
  p1: {
    value: 123,
    enumerable: true,
    configurable: true,
    writable: true,
  },
  p2: {
    value: 'abc',
    enumerable: true,
    configurable: true,
    writable: true,
  }
});

// 等同于
var obj = Object.create({});
obj.p1 = 123;
obj.p2 = 'abc';

个人感觉跟new的用法非常相似，区别在于：

  • 字面量和new关键字创建的对象是Object的实例，原型指向Object.prototype，继承内置对象Object

  • Object.create(proto, propertiesObject)创建的对象的原型取决于proto，proto为null，新对象是空对象，没有原型，不继承任何对象；proto为指定对象，新对象的原型指向指定对象，继承指定对象。propertiesObject是可选参数，指定要添加到新对象上的可枚举的属性（即其自定义的属性和方法，可用hasOwnProperty()获取的，而不是原型对象上的）的描述符及相应的属性名称,如果不传则实例对象为{}。

  • Object.create(o),如果o是一个构造函数，则采用这种方法来创建对像没有意义

  • Object.create(o),如果o是一个字面量对象或实例对象，那么相当于是实现了对象的浅拷贝

封装

把"属性"（property）和"方法"（method），封装到一个构造函数里，并且他的实例对象可以继承他的所有属性和方法，构建构造函数

prototype

解决所有实例指向prototype对象地址，而不需要每个实例对象重复生成构造内部属性方法，这意味着，我们可以把那些不变的属性和方法，直接定义在prototype对象上，被构造函数实例继承

// before 
function Person(name){
    this.name = name;
    this.say = function(){
        console.log('say hi');
    }
}
//after
function Person(name){
    this.name = name;
    this.age = 12;
}
Person.prototype.say = function(){
    console.log('say hi')
}
var son = new Person('king');
var daughter = new Person('kim');

isPrototypeOf()用来判断，某个proptotype对象和某个实例之间的关系; Person.prototype.isPrototypeOf(son) // true hasOwnProperty()判断某一个属性到底是本地属性，还是继承自prototype对象的属性; son.hasOwnProperty("age") //false in运算符还可以用来遍历某个对象的所有属性,包含继承的属性 for(var prop in son)

原型，原型链

  • 内置对象：Object、Function都是js内置的函数, 类似的还有我们常用到的Array、RegExp、Date、Boolean、Number、String

  • js分为函数对象和普通对象，每个对象都有proto属性，但是只有函数对象才有prototype属性

  • 除了Object的原型对象（Object.prototype）的proto指向null，其他内置函数对象的原型对象和自定义构造函数的proto都指向Object.prototype, 因为原型对象本身是普通对象

function F(){};
F.prototype.__proto__ = Object.prototype;
Array.prtotype.__proto__ = Object.prototype;
Object.prototype.__proto__ = null;

F.__proto__ = Function.prototype;

var f = new F();
f.__proto__ = F.prototype;

继承

  • 构造函数继承
function Person(name){
    this.name = name
}
function Son(name){
    Person.call(this,name)
}
var obj = new Son('king');
console.log(obj.name)  // 'king'
  • prototype模式

组合模式

function Person(age){
    this.age = age
}
function Son(age){
    this.name = 'king';
    Person.call(this,age);
}
// 改变Son的prototype指向Person的实例，那么Son的实例就可以继承Person
Son.prototype = new Person();
console.log(Son.prototype.constructor == Person.prototype.constructor)  //true
// 避免继承链混乱，将Son.prototype对象的constructor改回Son
Son.prototype.constructor = Son;
var obj = new Son(12);
console.log(obj.age)  // 'king'
console.log(Person.prototype.isPrototypeOf(obj)) // true 同时继承Person和Son

function Person(){

}
Person.prototype.age = 12;
function Son(name){
    this.name = name;
}
// Son.prototype指向Person.prototype
Son.prototype = Person.prototype;
console.log(Son.prototype.constructor == Person.prototype.constructor)  //true
// 然而也修改了Person.prototype.constructor为Son
Son.prototype.constructor = Son;
var obj = new Son('king');
console.log(obj.age)  // 'king'
console.log(Person.prototype.isPrototypeOf(obj)) // true 同时继承Person和Son
Son.prototype.sex = 'male';
console.log(Person.prototype.sex);  // 'male'

差别：与前一种方法相比，这样做的优点是效率比较高（不用执行和建立Person的实例了），比较省内存。缺点是 Person.prototype和Son.prototype现在指向了同一个对象，那么任何对Son.prototype的修改，都会反映到Person.prototype，再次改进如下，

利用空对象作为中介

function Person(){
    this.age = 12
}
Person.prototype.sex = 'male';
function Son(){
    this.name = 'king';
}
var F = function(){};
F.prototype = Person.prototype;
Son.prototype = new F();
Son.prototype.constructor = Son;
Son.uber = Person.prototype;
var obj = new Son();
console.log(obj.sex);  // 'male'

// 封装一下
function extend(Child, Parent) {
　　var F = function(){};
　　F.prototype = Parent.prototype;
　　Child.prototype = new F();
　　Child.prototype.constructor = Child;
　　Child.uber = Parent.prototype;
}
extend(Son,Parent);
var obj = new Son();
console.log(obj.sex);  // 'male'
  • 拷贝继承

利用 for...in 拷贝Person.prototype上的所有属性给Son.prototype,Son的实例就相当于继承了Person.prototype的所有属性以及Son的属性

  • 非构造函数继承

1.json格式的发明人Douglas Crockford，提出了一个object()函数，即后来的内置函数Object.create()

function object(o){
    var F = function(){};
    F.prototype = o;
    return new F();
}
var child = {
    name: 'child'
}
var parent = {
    name: 'parent'
}
var child = object(parent)
console.log(child.name);   // 'parent'

2.浅拷贝

var parent = {
    area: ['A','B']
}
function extendCopy(o){
    var c = {};
    for(var i in o){
        c[i] = o[i]
    }
    return c;
}
var child = extendCopy(parent);
child.area.push('C');
console.log(parent.area);  // ['A','B','C']

现象：当父对象的属性值为数组或者对象时，子对象改变那个属性值，父对象也会随之改变，因此，子对象只是获得了内存地址，而不是真正的拷贝，extendCopy只能用作基本数据类型的拷贝，这也是早期jquery实现继承的方式

3.深拷贝

var parent = {
    area: ['A','B']
}
　function deepCopy(p, c) {
　　　　var c = c || {};
　　　　for (var i in p) {
　　　　　　if (typeof p[i] === 'object') {
　　　　　　　　c[i] = (p[i].constructor === Array) ? [] : {};
　　　　　　　　deepCopy(p[i], c[i]);
　　　　　　} else {
　　　　　　　　　c[i] = p[i];
　　　　　　}
　　　　}
　　　　return c;
　　}
var child = deepCopy(parent);
child.area.push('C');
console.log(parent.area);  // ['A','B']
©著作权归作者所有,转载或内容合作请联系作者
禁止转载，如需转载请通过简信或评论联系作者。
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,843评论 6赞 502
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,538评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 163,187评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,264评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,289评论 6赞 390
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,231评论 1赞 299
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,116评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,945评论 0赞 275
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,367评论 1赞 313
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,581评论 2赞 333
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,754评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,458评论 5赞 344
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,068评论 3赞 327
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,692评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,842评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,797评论 2赞 369
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,654评论 2赞 354