JavaScript学习笔记018-面向对象编程思维0构造函数0Class

Author:Mr.柳上原

  • 付出不亚于任何的努力
  • 愿我们所有的努力,都不会被生活辜负
  • 不忘初心,方得始终

学习真是永无止境啊

学完html还有css

学完css还有JavaScript

学完js还有jQuery

学完jq还有H5

学完H5还有css3

学完css3还有Nodejs

学完node还有Vuejs

学完Vue发现招聘简历上还有css预处理Sass,Less,Stylus

还有Bootstrap

还有React + Redux

还有Angular

还有......

<!DOCTYPE html> <!-- 文档类型:标准html文档 -->

<html lang='en'> <!-- html根标签 翻译文字:英文 -->

<head> <!-- 网页头部 -->

<meat charset='UTF-8'/> <!-- 网页字符编码 -->

<meat name='Keywords' content='关键词1,关键词2'/>

<meat name='Description' content='网站说明'/>

<meat name='Author' content='作者'/>

<title>前端59期学员作业</title> <!-- 网页标题 -->

<link rel='stylesheet' type='text/css' href='css/css1.css'/> <!-- 外链样式表 -->

<style type='text/css'> /*内部样式表*/

</style>

</head>

<body> <!-- 网页主干:可视化区域 -->

<script>
/*
目标:电脑

面向过程编程思维:
买个显示器
机箱
主板
cup
......

面向对象编程思维:
先做一个组装电脑的流水线
运行:流水线 》 组装
需要什么配件再提供什么配件
扩展性:根据配件的不同,提供不同类型的电脑

面向对象三大特征:
封装
继承
多态
*/
// 面向对象编程 实例化
function Person(opt){
// 个性 私有属性
this.name = opt.name;
this.age = opt.age;
this.sex = opt.sex;

// 共性 公用属性
// prototype 原型(仓库)
Person.prototype = {
eat(value){ },
run(value){ },
}
return obj;
}
// Person的实例
const p1 = Person(name: "风屿", age: 18, sex: "男");
const p2 = Person(name: "风雨", age: 26, sex: "妖");

/*
构造函数:
new 函数( );

构造函数与普通函数的区别:
1.new函数生成了一个对象
2.函数内部this指向不同
3.返回值不同

new 函数( );
函数( );
*/
// 字面量与构造函数的写法
let a = "123"; // 字面量
let b = new String(123); // 构造函数

// 构造函数
function fn(){
console.log(this);
}
fn( ); // this指向window
new fn( ); // this指向fn{ }对象
let c = fn( ); // undefined
let d = new fn( ); // fn{ }

/*
Class:
在es6之前是保留字,在es6升级为关键字(有特殊意义)
用于定义类
跟let const一样,不存在变量提升,不能重复声明
*/
// es5写法
function Person1(name, age){
// 私有属性
this.name = name;
this.age = age;
}
Person1.prototype = {
// 公有属性
add (){},
sub (){},
}
const obj1 = new Person1("fengyu", 18);

// es6写法
Class Person2{
// 私有属性
constructor (name, age){
this.name = name;
this.age = age;
}
// constructor之外的属性都是公有属性
add (){}
sub (){}
}
const obj2 = new Person2("fengyun", 27);

</script>

</body>

</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏专知

关关的刷题日记04——Leetcode 283. Move Zeroes

题目 283. Move Zeroes Given an array nums, write a function to move all 0’s to the...

382100
来自专栏代码世界

Python之面向对象一

引子 小游戏:人狗大战 角色:人和狗 角色属性:姓名,血量,战斗力和性别(种类) 技能:打/咬 用函数实现人打狗和狗咬人的情形 def Dog(name,blo...

46590
来自专栏java学习

Java每日一题_关于形参与实参

1、当调用方法时,如果传入的数值为基本数据类型(包含String类型),形式参数的改变对实际参数不影响。

13040
来自专栏好好学java的技术栈

轻松看懂java设计模式简单工厂模式

简单工厂模式属于类的创建型模式,又叫做静态工厂方法模式。通过专门定义一个类来负责创建其他类的实例,被创建的实例通常都具有共同的父类。

19920
来自专栏web前端教室

震惊了!这样的js面试题让所有人-男默女泪

Sorry,大周末的搞一下标题党玩玩,但这个面试题倒是真的有坑,很sorry,这一次我掉进了第一个坑。 看问题一, (function(xxx){ delet...

225100
来自专栏BaronTalk

Java8新特性第3章(Stream API)

Stream作为Java8的新特性之一,他与Java IO包中的InputStream和OutputStream完全不是一个概念。Java8中的Stream是对...

373100
来自专栏写代码的海盗

我们是80后 golang入坑系列

现在这个系列,已经开始两极分化了。 点赞的认为风格轻松,看着不困。反之,就有人嫌写的罗里吧嗦,上纲上线。所以善意提醒,里面不只是技术语言,还有段子。专心看技术的...

36770
来自专栏Python小屋

Python正则表达式中的贪心模式和非贪心模式

声明:最近发现有人利用我在百度云盘里免费分享的127课Python视频盈利,并声称获得我的授权。在此,我声明,文末百度云盘里的Python视频是免费的,不会授权...

30370
来自专栏Python

初识面向对象

面向过程 VS 面向对象  面向过程的程序设计的核心是过程(流水线式思维),过程即解决问题的步骤,面向过程的设计就好比精心设计好一条流水线,考虑周全什么时候处理...

215100
来自专栏前端小栈

javaScript循环总结(for,for-in,for-of,forEach,map,filter,every,reduce,reduceRight)

循环是每个语言都必不可少的方法,javaScript也一样,随着javaScript的发展,我们用于循环的方法也在不断改进,也越来越精简,但是用好循环却不是那...

11030

扫码关注云+社区

领取腾讯云代金券