1.1 面向对象
在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。
1.2 创建对象
对象是由属性和方法组成的。
属性：事物的特征，在对象中用属性来表示。
方法：事物的行为，在对象中用方法来表示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建默认对象</title>
<script type="text/javascript">
/*
1.JavaScript中提供了一个默认的类Object, 可以通过这个类来创建对象
2.由于是使用系统默认的类创建的对象, 所以系统不知道想要什么属性和行为, 所以必须手动的添加想要的属性和行为
3.如何给一个对象添加属性对象名称.属性名称 = 值;
4.如何给一个对象添加行为对象名称.行为名称 = 函数;
*/
// 1.创建对象(方式一)
let obj1 = new Object();
obj1.name = "guardwhy";
obj1.age = 21;
obj1.func1 = function (){
console.log("属性:" + "javaScript最牛逼");
}
// 输出属性
console.log("姓名:"+ obj1.name);
console.log("年龄:" + obj1.age);
// 调用方法
obj1.func1();
console.log("++++++++++++++++++++");
// 2.创建对象(方式2)
let obj2 = {};
obj2.name = "guardwhy";
obj2.age = 21;
obj2.func2 = function (){
console.log("属性:" + "javaScript最牛逼");
}
// 输出属性
console.log("姓名:"+ obj2.name);
console.log("年龄:" + obj2.age);
// 调用方法
obj2.func2();
console.log("=======================");
// 3.创建对象(方式3)
// 注意点: 属性名称和取值之间用冒号隔开, 属性和属性之间用逗号隔开
let obj3 = {
name:"guardwhy",
age: 21,
func3: function (){
console.log("属性:" + "javaScript最牛逼");
}
};
// 输出属性
console.log("姓名:"+ obj3.name);
console.log("年龄:" + obj3.age);
// 调用方法
obj3.func3();
</script>
</head>
<body>
</body>
</html>
1.3 函数和方法区别
函数可以直接调用, 但是方法不能直接调用, 只能通过对象来调用，函数内部的this输出的是window, 方法内部的this输出的是当前调用的那个对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数和方法区别</title>
<script type="text/javascript">
/*
1.什么是函数?
函数就是没有和其它的类显示的绑定在一起的, 我们就称之为函数
2.什么是方法?
方法就是显示的和其它的类绑定在一起的, 我们就称之为方法。
4.无论是函数还是方法, 内部都有一个this
this是什么? 谁调用了当前的函数或者方法, 那么当前的this就是谁
*/
// 1.函数
function demo01(){
console.log("hello world!!!")
console.log(this);
}
// 调用函数
window.demo01();
console.log("+++++++++++++");
// 2.方法
let obj = {
name:"guardwhy",
demo02: function (){
console.log("hello world");
console.log(this);
}
};
// 对象调用方法
obj.demo02();
</script>
</head>
<body>
</body>
</html>
执行结果
1.4 工厂函数
工厂函数就是专门用于创建对象的函数!!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>工厂函数</title>
<script type="text/javascript">
function Person(Name, Age){
// 创建对象
let obj = new Object();
obj.name = Name;
obj.age = Age;
obj.say = function (){
console.log("hello javaScript");
}
return obj;
}
// 创建对象
let obj1 = new Person("curry", 10);
let obj2 = new Person("kobe", 21);
// 输出对象
console.log(obj1);
console.log(obj2);
</script>
</head>
<body>
</body>
</html>
执行结果
1.5 构造函数
1.5.1 什么是构造函数
主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起使用。
可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。构造函数本质上是工厂函数的简写。
function 构造函数名(形参1,形参2,形参3) {
this.属性名1 = 参数1;
this.属性名2 = 参数2;
this.属性名3 = 参数3;
this.方法名 = 函数体;
}
构造函数的调用格式
var obj = new 构造函数名(实参1，实参2，实参3)
1.5.2 构造函数和工厂函数的区别
构造函数的函数名称首字母必须大写,构造函数只能够通过new来调用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>构造函数创建对象</title>
<script type="text/javascript">
// 构造函数的函数名称首字母必须大写
function Person(myName, myAge){
// let obj = new Object(); // 系统自动添加的
// let this = obj; // 系统自动添加的
this.name = myName;
this.age= myAge;
this.say = function (){
console.log("hello javaScript!!!")
}
}
// 构造函数只能够通过new来调用
let obj1 = new Person("james", 10);
let obj2 = new Person("kobe", 34);
// 输出属性
console.log(obj1);
console.log(obj2);
</script>
</head>
<body>
<!--
构造函数就是一个普通的函数，创建方式和普通函数没有区别,
不同的是构造函数习惯上首字母大写，构造函数和普通函数的区别就是调用方式的不同。
普通函数是直接调用，而构造函数需要使用new关键字来调用。
构造函数的执行流程：
1.立刻创建一个新的对象
2.将新建的对象设置为函数中this,在构造函数中可以使用this来引用新建的对象
3.逐行执行函数中的代码
4.将新建的对象作为返回值返回
使用同一个构造函数创建的对象，称为一类对象，也将一个构造函数称为一个类。通过一个构造函数创建的对象，称为是该类的实例.
-->
</body>
</html>
执行结果
1.5.3 new关键字
new 构造函数可以在内存中创建了一个空的对象，this 就会指向刚才创建的空对象。执行构造函数里面的代码 给这个空对象添加属性和方法， 返回这个对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>new关键字</title>
<script type="text/javascript">
function Phone(bind, price, color) {
this.bind = bind;
this.price = price;
this.color = color;
this.say = function () {
console.log("小米牛逼！！！");
}
}
// 创建对象
let obj = new Phone('小米', 2000, '白色');
console.log(obj);
</script>
</head>
<body>
</body>
</html>
执行结果
1.5.4 遍历对象
基本语法
// for...in 语句用于对数组或者对象的属性进行循环操作。
for (var k in obj) {
console.log(k); // 这里的 k 是属性名
console.log(obj[k]); // 这里的 obj[k] 是属性值
}
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>构造函数遍历</title>
<script type="text/javascript">
// 遍历对象
let obj = {
name: 'Rondo老师',
age: 18,
sex: '男',
fn: function() {}
}
// for (变量 in 对象) {
// }
for (let k in obj) {
/*
console.log(k); // k 变量 输出 得到的是 属性名
console.log(obj[k]); // obj[k] 得到是 属性值
*/
console.log(k +":" + obj[k]);
}
</script>
</head>
<body>
</body>
</html>
1.5.5 静态成员和实例成员
实例成员
实例成员就是构造函数内部通过this添加的成员 。如下列代码中uname age sing 就是实例成员,实例成员只能通过实例化的对象来访问
function Person(uname, age) {
this.uname = uname;
this.age = age;
this.play = function() {
console.log('我会打球');
}
}
var obj = new Person('kobe', 18);
console.log(obj.uname);//实例成员只能通过实例化的对象来访问
静态成员
静态成员在构造函数本身上添加的成员,如下列代码中 sex 就是静态成员,静态成员只能通过构造函数来访问。
function Star(uname, age) {
this.uname = uname;
this.age = age;
this.sing = function() {
console.log('我会打球');
}
}
Star.sex = '男';
var ldh = new Star('kobe', 18);
console.log(Star.sex);//静态成员只能通过构造函数来访问
1.5.6 构造函数的缺点
使用构造函数带来的最大的好处就是创建对象更方便了，但是其本身也存在一个浪费内存的问题。
function Person (name, age) {
this.name = name
this.age = age
this.type = 'human'
this.sayHello = function () {
console.log('hello ' + this.name)
}
}
var p1 = new Person('lpz', 18)
var p2 = new Person('Jack', 16)
console.log(p1.sayHello === p2.sayHello) // => false
解决方案
通过prototype属性进行优化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>构造函数的优化</title>
<script type="text/javascript">
function Person (uName, uAge) {
this.name = uName
this.age = uAge
}
Person.prototype = {
sayHello: function (){
console.log('hello ' + this.name)
}
}
let p1 = new Person('curry', 10)
let p2 = new Person('james', 16)
console.log(p1.sayHello === p2.sayHello) // => true
</script>
</head>
<body>
</body>
</html>
1307
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
