76 lines
3.3 KiB
HTML
76 lines
3.3 KiB
HTML
<!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>Document</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
<script>
|
||
// 方法一： 用字面量创建单个对象
|
||
var obj={name:"cony"}
|
||
// 方法二：用构造函数创建单个对象
|
||
function createobjgc(name){
|
||
this.name=name
|
||
this.say=function (){
|
||
console.log("hello"+name)
|
||
}
|
||
}
|
||
var obj3=new createobjgc("cony")
|
||
var obj4=new createobjgc("ling")
|
||
console.log(obj3.say==obj4.say) //false
|
||
|
||
// console.log(obj2) //{name:cony}
|
||
// 详解构造函数
|
||
// 1.构造函数唯一区别就在于调用他们的方式不同。任何函数只要通过new关键字调用 那他就可以作为构造函数
|
||
// 如果构造函数不通过new调用 那这个函数跟普通函数也没有任何区别
|
||
// 2.构造函数的问题，实例中的每个方法都要在每个实例上重新创建一遍.
|
||
// 上面的构造函数可以写成下面的形式
|
||
// function createobj(name){
|
||
// this.name=name
|
||
// this.say=new Function ( `console.log("hello"+${name})`)
|
||
|
||
// }
|
||
// 也就是上面的obj3和obj4都有say()方法，但两个say()方法 并不是同一个Function的实例 (ECMAScript中的函数是对象，所以说没实例化一遍就会实例化一个function对象)
|
||
// 所以说虽然创建的机制一样，但是他们不在同一个作用域链上了所以obj1.say== obj2.say =》false
|
||
|
||
// 为了解决这个问题，可以通过下面的方式定义
|
||
function createobj0(name){
|
||
this.name=name
|
||
this.say=say
|
||
}
|
||
var say=function(){
|
||
console.log("hello"+this.name)
|
||
}
|
||
var obj3=new createobj0("cony")
|
||
var obj4=new createobj0("ling")
|
||
// 将say方法 放在构造函数外面后，say方法就成了全局变量 然后从构造函数中指向外面的say方法 也就是全局的say函数。
|
||
// say函数中包含的是一个指向函数的指针（this）,因此 obj3和obj4就共享了一个在全局作用域下定义的函数。解决了上面出现的问题
|
||
// 新的问题： 每定义一个方法 就需要在全局定义一个函数， 而且在全局作用域中定义的函数实际只能被某个对象调用
|
||
// 这样的全局作用域有点名不副实 而且缺乏封装性
|
||
// 为了解决上面所说的两个问题，我们有第三种方法：原型模式
|
||
|
||
// 方法三：原型模式创建对象
|
||
// 初步认识原型：我们创建的每个函数都有一个prototype(原型)属性，这个属性是一个指针，指向一个对象
|
||
//
|
||
function creator(){
|
||
|
||
}
|
||
creator.prototype.name="万能的小明"
|
||
creator.prototype.say=function(){
|
||
console.log("hello"+this.name)
|
||
}
|
||
var stu1=new creator()
|
||
var stu2=new creator()
|
||
stu1.say()
|
||
stu2.say()
|
||
console.log(stu1.say==stu2.say)
|
||
//hello 万能的小明
|
||
// true
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<p>对象创建</p>
|
||
|
||
</body>
|
||
</html> |