面向对象-1 - 码农教程

<!DOCTYPE html>

<head>

</head>

<body>

/**

* 对象

* 类

* 实例

* 封装继承多态

* 封装-> ：把实现某个功能的代码封装到函数中，起到"低耦合高内聚"的作用

* 继承-> ：子类及子类的实例继承了父类中的属性和方法

* 多态-> ：函数的重载(方法名相同，但是传递参数的个数或者类型不同，识别为两个不同的方法)和重写(子类重写父类的方法)

* js 内置类

* 每一个数据类型都有自己的所属内置类

* 获取的元素集合或者节点集合也是有自己的类

* 每一个元素标签都有自己所属的类

* Number Sting Boolean Array

* FUNCTION 函数类

* OBJECT 对象类

/**

* 自定义类 (所有的类【内置类/自定义类】都是 “函数数据类型” 的值)

* 函数执行的时候基于 new 执行既可 “构造函数执行”

* */

// function Fn(x,y){

// let total = x + y;

// this.x = x;

// this.y = y

// // return total;

// return {

// name:"Eric"

// }

// 作为普通函数执行

// console.log(Fn(10,20));

/** 构造函数执行

* 创建上下文之后浏览器默认帮我蒙创建一个对象“实例对象”

* 把当前 Fn 函数当作一个类的 “构造函数”

* 创建的对象就是这个类的一个实例

* 初始 this的时候，让this 指向当前创建的实例对象

* 在代码执行完返回值的事件

* 如果函数没有 return 或者返回的值是一个基本数据类型值，

* 则浏览器默认会把创建的实例对象返回

* 如果函数本身返回的就是一个引用数据类型值，还是以自己返回的为主

// f1 是 fn这个类的一个实例对象

// let f1 = new Fn(10,20)

// // 由于构造函数体中，默认自己返回一个引用数据类型值，

// // 所以f1 不再是创建的 Fn 实例，而是自己返回的对象

// console.log(f1); // Fn {x: 10, y: 20}

// // instanceof 检测当前实例是否属于这个类

// console.log(f1 instanceof Fn); // false

// 2

// function Fn(x,y){

// let total = x + y;

// this.x = x;

// this.y = y

// this.say = function say(){

// console.log(`SAY:${total}`);

// }

// let f1 = new Fn(10,20)

// let f2 = new Fn;

/**

* 检测一个属性是否为当前对象的成员

* 属性名 in 对象: 不论是私有属性还是公有的属性，只要有就是true

* 对象.hasOwnProperty(属性名): 必须是对象的私有属性，结果才是true

// console.log('say' in f1); // true

// console.log('toString' in f1); // true

// console.log('total' in f1); // false

// console.log(f1.hasOwnProperty('say')); // true

// console.log(f1.hasOwnProperty('toString')); // false

// console.log(f1.hasOwnProperty('total')); // false

/**

* Fn vs Fn()

* fn 代表的是函数本身(堆内存) -> Fn(x,y){...}

* Fn() 是把函数执行，获取其返回结果

* */

/**

* new Fn vs new Fn(10,20)

* 都是把Fn执行了

* 只是第一个没有传递实参，

* 第二个可以传递实参而已

* new Fn 运算优先集是 18 (无参数列表new)

* new Fn() 运算优先集是 19 (有参数列表new)

// 3

Object.prototype.AA = 'Eric';

let obj = {

name: 'xxx',

age:11,

0:100,

[Symbol('AA')]:200,

[Symbol.toPrimitive]:function(){

return 0;

}

Object.prototype.bb = 'Eric1';

/**

* 基于 "for...in" 循环遍历对象

* 优先遍历数字属性

* 不会遍历到 Symbol 属性

* 会把自己扩展到 “类原型”上的公共属性方法也遍历到

* */

// for(let key in obj){

// // console.log(item);

// // 在遍历过程中，遍历到公共属性，则停止遍历，

// // 因为"for...in" 循环遍历的本意就是只遍历私有的属性既可

// if(!obj.hasOwnProperty(key)) break;

// console.log(key,obj[key]);

// }

// console.log(obj);

/**

* Object.keys() ["0", "name", "age"]

* 获取当前对象所有非symbol的私有属性【数组】

* Object.getOwnPropertySymbols(obj) 获取对象所有的 Symbol 私有属性【数组】

* [Symbol(AA), Symbol(Symbol.toPrimitive)]

* */

// console.log(Object.keys(obj)); // ["0", "name", "age"]

// console.log(Object.getOwnPropertySymbols(obj)); // [Symbol(AA), Symbol(Symbol.toPrimitive)]

// console.log(Object.getOwnPropertyNames(obj)); // ["0", "name", "age"]

// console.log(Object.getPrototypeOf(obj)); 获取原型上的数据

let keys = [...Object.keys(obj),...Object.getOwnPropertySymbols(obj)]

// console.log(keys); ["0", "name", "age", Symbol(AA), Symbol(Symbol.toPrimitive)]

keys.forEach(key =>{

console.log(`属性名:${String(key)},属性值:${obj[key]}`);

})

</script>

</body>

</html>

我是Eric,手机号是13522679763

原文地址：https://www.cnblogs.com/eric-share/p/15035123.html