JS面向对象

最新推荐文章于 2024-10-16 17:24:41 发布

原创最新推荐文章于 2024-10-16 17:24:41 发布 · 163 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

笔记专栏收录该内容

14 篇文章

订阅专栏

什么是面向对象

类：有了类，就可以创建对象，类名都会大写（为了和变量名区分）
对象：是通过类创建出来的

学习面向对象，就是学习如何通过类创建对象。
特征：
（1）封装可以把很多属性和方法封装在一起。
（2）继承一个子类可以继承父类中的属性和方法。
（3）多态 …

一、JS中创建对象的两种方式

1.通过字面量创建

仅仅JS才有，在JAVA中，对象都是new出来的。

<script>
	// 通过字面量的形式创建对象 
	let obj2 = { name:"wc" }
	obj2.age = 110; 
	console.log(obj2.name) 
	console.log(obj2.age)
</script?

2.通过new一个类

<script>
	// 通过new一个类去创建对象
	let obj = new Object(); 
	obj.name = "xq"; 
	obj.age = 111; 
	console.log(obj.name); // {} 
	console.log(obj.age); // {}
</script?

二、JS中内置的类

在JS中提供了很类，有了这些类，就可以创建对象，类如下：

Number类
String类
Boolean类
Object类
Array类
Date类 …

1.Number类：

new Number(); new一个是运算符创建出一个对象
instanceof instance本意是实例（对象）的意思是一个运算符
num1 instanceof Number
表示测试num1是否由Number创建的出来的
或者说测试num1是否是Number的实例
如果是就返回true 否则返回false

2.String类:

new String();
还需要使用一个变量来引用这个对象

let xx = new String(“hello”);
xx叫：对象实例
String叫：类构造器

3.Boolean类：

let flag = new Boolean(true);

4.Object类：

 let obj = new Object();

5.Array类：

 // 通过字面量的形式创建数组
  let arr1 = [1,2,3]
   console.log(arr1) 

// 通过new Array的形式创建数组
 let arr2 = new Array("a","b","c")
  console.log(arr2)

6.Date类：

Date是日期的意思 Data是数据的意思

  // Date是类 构造器 d是日期对象 l
  let d = new Date(); 
  console.log(d)

三、一切都是对象

所有数据都是对象：

（1）所有的html元素都是对象
（2）数组也是对象
（3）函数也是对象
（4）基本数据类型也可以是对象
（5）window也是对象 GO
（6）consolo也是对象
（7）{} 也是对象
…

1.所有的html元素都是对象

// lis是两个li 是一个数组（伪数组） 
let lis = document.getElementsByTagName("li");
 // lis[0] 是一个对象 对象是类创建的 
 console.dir(lis[0]); 
 // 如果是对象，使用dir打印，可以看到对象中的属性 
 // HTMLLIElement 是类 也叫构造器
  console.log(lis[0] instanceof HTMLLIElement)

2. 数组也是对象：

   let arr1 = ["a","b","c"] 
    let arr2 = new Array("d","e","f"); // arr2肯定是对象 
    // 对象是属性的无序集合 
    console.dir(arr1) 
    console.dir(arr1.length) 
    console.dir(arr1.push()) 
    console.dir(arr1.pop()) 
    console.log(arr1 instanceof Array)

3.函数也是对象：

 function fn() { 
 	console.log("fn...")
 	 }
 console.dir(fn) 
 fn.call() fn.bind() 
 // fn是对象 实例 Function是类 构造器 
 console.log(fn instanceof Function)

4.基本数据类型也可以是对象：

 let str = "hello"; 
 str.toUpperCase()  //str会瞬间包装成一个对象 
 str.length  //str会瞬间包装成一个对象 
 let num = 110; 
 num.toFixed(2)  //num会瞬间包装成一个对象

四、对象是属性的无序集合

对象是属性的无序集合：
操作集合中的属性，说到操作，就是指"增删改查"。

1.查:

如何访问对象中的属性。在JS中提供了两种方式，可以访问对象中的方式
1）打点调用 .属性访问运算符非常常用
2）通过[]调用目前来说，先了解
当访问一个对象上不存在的属性，得到的undefiend

遍历对象：把对象中每一个属性都获取到 for in来遍历对象
遍历数组：

    let arr = ["a","b","c"]
    // 1）使用for循环就可以遍历数组
    for(let i=0; i<arr.length; i++){ // 命令式编程
      console.log(arr[i])
   }
    // 2）使用forEach遍历数组
    arr.forEach(item=>{
      console.log(item)
   })
    // 3）使用for in遍历数组
    for (let key in arr) {
      // 此处的key是索引 下标
      console.log(arr[key])
   }

2.增:

给对象中增加一个属性
通过 obj.xxx = “xxx”

3.改:

所谓的修改，就是添加一个同名的属性，后面添加的同名属性，会把前面的覆盖掉

4.删：

delete运算符是一个运算符 typeof in new instancefo delete

  let obj = {
    name:"wangcai",
    age:100
 }
  delete obj.age; // 删除obj中的age属性
  console.log(obj.age); // 相当于访问一个对象上不存在的属性 结果是und

五、公有属性和私有属性

let obj = {
  name:"wangcai", // 私有属性
  age:100 // 私有属性
}

每个对象上面都是一个属性叫__proto__，它指向一个对象，这个对象叫原型对象：
这个东西，叫隐式原型对象，简称为原型对象。

属性分类：
1）公有属性对于obj来说，公有属性是指__proto__里面的属性
2）私有属性指name和age

hasOwnProperty(): 判断一个属性是否是一个对象的私有属性
公有属性和私有属性，也必须指定出是相对于谁来说的。

delete运算符，只能删除私有属性，不能删除公有属性。

如果说私有属性和公有属性同名：
调用时，调用的是自己的私有属性。在一个对象中找一个属性，先在自己的私有属性中找，找不到，才
会去公有属性中找

  let arr = ["a","b","c"];
  // arr.push("d"); // push是公有属性
  arr.push = function () {  // 这样添加的属性都是私有属性
    console.log("此push是一个arr的私有属性")
 }
  arr.push("d"); // 此处调用的push就是自己的push
  console.log(arr)

in:
也是一个运算符判断一个属性是否属于某个对象不管是公有属性还是私有属性

六、对象是由类（函数）创建的

函数有多个角色：
我把函数分成4个角色函数在JS中的是一等公民
学习JS 函数是核心

角色一：把函数当做一个普通的函数

  // 把函数当作是一个普通的函数
  function fn() {  // 函数声明
    console.log("fn...")
 }
  fn(); // 函数调用

角色二：函数出现在对象中，是一个方法

    let obj = {
      name:"wangcai",
      age:100,
      //下面的函数是一个方法
      say:function () {  // 一个函数出现在对象中， 我们叫它为方法
        console.log("say...")
     }
   }
    obj.say();

角色三：函数也是一个对象

    function fn() {
      console.log("fn...")
   }
    // fn也可以是一个对象 对象是属性的无序集合
    fn.a = 1;  // 给对象上添加私有属性 a
    fn.b = 2; // 给对象上添加私有属性 b
    fn.c = 3; // 给对象上添加私有属性 c
    console.dir(fn)

角色四：函数也可以是一个类

如果你把函数当成一个类，通常函数名（类名）要大写。是推荐大写。

 // Person是类
  function Person(name) {
    this.name = name;  // 给对象设置一个私有属性
 }
  // 只要是对象，必定有一个属性叫__proto__
  let p1 = new Person("wangcai"); // p1是对象 对象是属性的无序集合
  console.dir(p1)