js高级之面向对象(一)

对象的定义:

JS中一切皆为对象,这是一句常说的话。了解JS对象,从这句话开始吧。JS中的基本数据类型如number,bool,字符串,数组,null,undefined等等都是对象。

对象的本质:

带有属性和方法的特殊数据类型,而每个属性或者方法又可看做是一个键值对,因此可以这样定义:对象是一系列无序键值对的集合

js中有两种对象

  • 系统的内置对象:比如说,string Date Array

  • 自己创建的对象

声明对象或者创建对象的方式

//第一种方式
 var obj = {name:"张三",age:20};
//第二种方式
var obj  = new Object();
obj.name = "张三";
obj.age = 20;
//第三种方式
var obj = Object.create({name:"张三",age:20});

对象中不仅可以定义属性,还可以定义方法

var obj = {
  name:"二哈",
  age:5,
  behaivor:function(){
    console.log("吃饭睡觉");
  }
}
//调用属性和方法
console.log(obj.name);
obj.behavior();

设计模式之工厂模式

什么是工厂模式: 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。 简单的工厂模式可以理解为解决多个相似的问题;这也是她的优点;

比如定义一个狗类

function Dog(name,age,sex){
  var obj = {};
    obj.name = name;
    obj.age  =age;
    obj.sex = sex;
    obj.sayName = function(){
        return this.name;
    }
  return obj;
}
var dog1 = new Dog("大黄",10,"公");
console.log(dog1.name);//大黄
console.log(dog1.age);//10
console.log(dog.sayName());//大黄

上面的代码,Dog函数能接受三个参数,可以无数次调用这个函数,每一次返回的都是包含三个属性和一个方法的对象;

工厂模式是为了解决多个类似对象声明的问题;也就是为了解决实列化对象产生重复的问题。

构造函数

构造函数就是初始化一个实例对象,对象的prototype属性是继承一个实例对象。

构造函数的注意事项:

  • 默认函数首字母大写

  • 构造函数并没有显示返回任何东西。new 操作符会自动创建给定的类型并返回他们,当调用构造函数时,new会自动创建this对象,且类型就是构造函数类型。

  • 也可以在构造函数中显示调用return.如果返回的值是一个对象,它会代替新创建的对象实例返回。如果返回的值是一个原始类型,它会被忽略,新创建的实例会被返回。

也就是说:

 function Person (name){
  this.name = name;
}
var newPerson = new Person("JS");

等价于

function person(name){
  Object obj = new Object();
  obj.name = name;
  return obj;
}
var newPerson = person("JS");

构造函数的定义:属性定义在函数里面,方法定义在原型中。
构造函数包括构造函数本身和它的原型

function Person(name,age,height){           
                 this.name = name;
        this.age = age;
        this.height = height;
}       
  Person.prototype.hobby = function(){
            console.log("喜欢篮球");
        }
        Person.prototype.action = function(){
            //this指向的是实例化的对象            
                        console.log("姓名是"+this.name+"年龄是"+this.age);
        }
        var zhangsan = new Person("张三",18,"189cm");
        zhangsan.action();

通过构造函数找到原型:prototype;
通过原型找到构造函数:constructor;

构造函数的公有和私有

function Person(name){
    //私有属性
    var name = name;
    //公有属性
    this.height = "189cm";
    //get方法:通过共有方法访问私有属性
    this.get = function(){
        return name;
    }
    //set方法:设置私有属性
    this.set = function(newName){
        name = newName;
        console.log(name);
    }
}
var newPerson = new Person("张三");
console.log(newPerson.name);//undefined
console.log(newPerson.get());
newPerson.set("李四");

构造函数的继承

function Person(name,age){
  this.name = name;
  this.age = age;
}
Person.prototype = function(){
  console.log("haha");
 }
//继承属性
function Student(name,age){
  Person.call(this,name,age);
}
//继承原型
//会涉及到传址的问题,所以要找第三者
function Link(){}
Link.prototype = Person.prototype;
Student.prototype = new Link();

class Person{
  //类最开始的时候加载执行
  constructor(name,age){
    this.name = name;
    this.age = age;
  }
  hobby(){
   console.log("吃饭睡觉打豆豆");
  }
}
//类的调用
var zhangsan = new Person("张三",28);
console.log(zhangsan.name);
zhangsan.hobby();
//类的继承
class Student extends Person{
  constructor(name,age){
    super(name,age);
  }
  action(){
    console.log("我是action函数");
  }
}
var newStudent = new Student("李四",10);
console.log(newStudent.name);
newStudent.hobby();
newStudent.action();
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,607评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,047评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,496评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,405评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,400评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,479评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,883评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,535评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,743评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,544评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,612评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,309评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,881评论 3 306
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,891评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,136评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,783评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,316评论 2 342

推荐阅读更多精彩内容