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();

你可能感兴趣的:(js高级之面向对象(一))