JavaScript基本知识(二)

1.面向对象的相关概念:

1.对象指的是具体的事物。

eg:电脑,人等不是对象。具体的某个电脑,某个人才是对象。

2.对象的定义:

键值对的集合|属性(方法)的工具包|对变量和函数的封装。

3.面向对象的三大特性:封装、继承、多态。

js的封装:使用对象来封装变量和函数。

js的继承:js没有类的概念。
js的继承是一个对象获得另外一个对象的属性和方法的行为。

4.创建对象的方式:

  • 字面量
  • 内置构造函数(new Object())
  • 简单工厂函数创建
  • 自定义构造函数
  • Object.create()

/**
* 字面量方式
*/
  var book1 = {
    name:'西游记',
    author:'罗贯中',
    price:'20',
    desLog:function(){
        console.log("书名:"+this.name +" 作者:"+this.author);
    }
}


/**
* 内置对象构造函数
*/
   var book = new Object();
book.name = "红楼梦";
book.author = "曹雪芹";
book.price = "30";
book.desLog = function(){
    console.log("书名:"+this.name +" 作者:"+this.author);
}
book.desLog();

前两种方式存在的问题:若创建多个同类型的对象,字面量方式和内置构造函数方式中代码的冗余度太高,复用性比较差。

/**
* 简单工厂函数创建
*/
  function createBook(name,author,price){
    var book = new Object();
    book.name = name;
    book.author = author;
    book.price = price;
    book.desLog = function(){
        console.log("书名:"+this.name +" 作者:"+this.author);
    }
    //此处一定要返回该对象
    return book;
}

function Painting(name,author,price){
    var paint = new Object();
    paint.name = name;
    paint.author = author;
    paint.price = price;
    paint.desLog = function(){
        console.log("书名:"+this.name +" 作者:"+this.author);
    }
    //此处一定要返回该对象
    return paint;
}
var book3 = createBook("西游记","罗贯中","20");
var book4 = Painting("向日葵","梵高","3000000");
 //无法区分对象的类型  书?画

简单工厂函数虽然可以解决冗余度问题,若存在几个相似类型对象时,无法区分对象的类型。

function Person(name,age){
    this.name = name;
    this.age = age;
    this.setName = function(){
        console.log(this.name);
    }
}
var p1 = new Person("张三","20");
var p2 = new Person("李四","10");
p1.setName();
p2.setName();
console.log(p1.setName == p2.setName);     //false

自定义构造函数可以将对象的类型区分开,但是构造函数必须要和new一起使用,如果直接调用则无法创建对象。 当声明两个相同的对象,这两个对象访问同一个方法是,该方法会各被调用一次。
若需要让多个对象共享同一个函数,考虑到把函数抽取到构造函数外部,此时又会破坏代码的封装性。

自定义构造函数创建对象的内部实现过程:
1.提供构造函数
2.通过new创造一个空的对象:object
3.设置新创建对象的原型对象为构造函数的原型对象
4.设置新创建对象的构造函数为当前的构造函数
5.把新创建的对象赋值给this
6.通过this设置属性和方法
7.默认在最后把新创建的对象返回
(若有显示的return,
    返回值为值类型,忽略该值,返回新对象;
    返回值为引用类型,return的对象会把新创建的对象覆盖。
)

/*自定义构造函数创建对象的内部实现过程:
*/

function Person(name,age){
    //2创建对象,指向Object的一个空对象
//  var o = new Object();
    //3.设置新创建对象的原型对象为构造函数的原型对象
//   o.__proto__ = Person.prototype;
    //4.设置新创建对象的构造函数为当前的构造函数
//   o.constructor = Person;
    //5.把新的对象赋值给this
//   this = o;
    this.name = name;
    this.age = age;
    this.setName = function(){
        console.log(this.name);
    }
    //7.默认把新创建的对象返回
 //   return this;
}

5.区分对象的类型:

instanceof:检查某个对象是否是指定构造函数的实例对象(是不是它创建的对象)。返回值为Boolean

constructor(构造器属性):判断对象是什么类型;返回值:构造函数()

6.构造函数的注意事项:

1.构造函数必须要和new一起使用,如果直接调用则无法创建对象。

2.this的指向:

如果使用new 构造函数()调用, this->具体的对象

如果以普通函数的方式调用, this->window

7.原型对象:

1.构造函数有一个默认的相关联的对象,这个对象就是该构造函数的原型对象。

在使用new 构造函数()创建对象的时候,内部默认会关联这个新对象的原型对象为当前构造函数的原型对象。

原型对象默认是一个空的对象。

2.原型对象的特点(作用):
构造函数的原型对象上面的属性和方法 可以被使用该构造函数创建出来的所有对象所共享。

3.访问原型对象:

①构造函数.prototype

②对象.__proto__

③Object.getPrototype(对象)

4.原型对象的使用:

使用对象的动态特性;

使用字面量的方式直接替换原型对象。

建议:一般把属性写在对象上面,把方法写在原型上面。

5.替换原型对象:

  • 注意设置原型对象的位置:

    建议在设置完原型对象之后,再统一的创建对象。

  • constructor指向的是创建当前对象的构造函数。

  • 替换了原型对象之后constructor指向Object,所以需要修正构造器属性。

    对象本身并没有constructor属性,该属性是原型对象的属性。

6.原型对象使用的注意点:

  • 访问属性|方法
访问逻辑:首先在对象自身找,若没有,再查找原型对象。

设置属性和方法:

    1.通过“对象.属性”的方式设置的是实例对象的属性。

     实例对象只能在自身上设置属性。

    2.设置对象时,如果是引用类型,设置原型对象的属性 通过“对象.属性.属性”。

也就是说:实例对象不能直接在原型对象中设置属性,要想设置原型对象中的属性,要先调用原型对象。

8.prototype和__proto__的概念

prototype:函数的一个属性。(每个函数都有一个prototype属性。)prototype指向对象。显示修改对象的原型的属性。

__proto__:一个对象拥有的内置属性。是js内部使用寻找原型链的属性。

9.in关键字和hasOwnProperty属性:

hasOwnProperty:查找自己是否有这个属性(只检查实例成员);

in:遍历对象;判断对象中是否存在指定的属性。(实例成员+原型成员)。

10.isPrototypeOf和Object.getPrototypeOf的区别:

isPrototypeof:判断是否是某个对象的原型对象;

Object.getPrototypeOf(对象):获取原型对象
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 195,653评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,321评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 142,833评论 0 324
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,472评论 1 266
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,306评论 4 357
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,274评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,658评论 3 385
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,335评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,638评论 1 293
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,697评论 2 312
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,454评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,311评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,699评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,986评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,254评论 1 251
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,647评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,847评论 2 335

推荐阅读更多精彩内容