JavaScript学习笔记018-面向对象编程思维0构造函数0Class
JavaScript学习笔记018-面向对象编程思维0构造函数0Class
Mr. 柳上原
发布于 2018-09-05 15:23:41
发布于 2018-09-05 15:23:41
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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.08.23 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读