面向对象-基础
原创wg_iGBFcBFB 博主文章分类:js高级相关 ©著作权
©著作权归作者所有:来自51CTO博客作者wg_iGBFcBFB的原创作品,请联系作者获取转载授权,否则将追究法律责任
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>面向对象</title>
</head>
<body>
<script>
/**
* 对象
* 类
* 实例
*
* 封装 继承 多态
*
* 封装-> :把实现某个功能的代码封装到函数中,起到"低耦合高内聚"的作用
* 继承-> :子类及子类的实例继承了父类中的属性和方法
* 多态-> :函数的重载(方法名相同,但是传递参数的个数或者类型不同,识别为两个不同的方法)和重写(子类重写父类的方法)
*
*
* 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>
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
面向对象基础
<br /> 什么是面向对象编程?就是把万事万物都抽象成为对象,一切都是对象!<
class string 扩展 interface 编程 -
Python基础 - 面向对象
面向对象基础入门, 理解概念为主, 其妙用需要很长时间去领悟哦.
多态 封装继承 面向对象 数据 python -
JAVA面向对象(基础)
JAVA面向对象基础简单的面向对象类的定义与实现:public class Student { public static void
多态 java 编程语言 jvm 面试